摘要：规定动画的名称。规定动画是否在下一周期逆向地播放。定义动画各个阶段的状态的代码段。动画的周期时间。动画的循环次数。动画完成后，元素保持动画最后的状态。重要提示请不要忘记推荐和收藏搜索动画详解
CSS3 提供给了我们非常多的转换函数：
2D: translate, rotate, scale, skew.
3D: translate3d, rotate3d, scale3d, skew3d.
只需要将这些函数作为transform属性的值，就可以设置相应的效果。
CSS3 动画则是将这些效果以及其他CSS属性按照你设定的方式来进行互相转变。
1. 动画相关属性属性 | 描述
--------------------------- | ------------------------------------------------------------------------------
@keyframes | 定义动画各个阶段的状态的代码段
animation | 所有动画属性的简写属性，除了 animation-play-state 和 animation-fill-mode 属性。
animation-name | 规定 @keyframes 动画的名称。
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function | 规定动画的速度曲线。默认是 ease。
animation-delay | 规定动画何时开始。默认是 0。
animation-iteration-count | 规定动画被播放的次数。默认是 1。
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 normal。
animation-play-state | 规定动画是否正在运行或暂停。默认是 running。
animation-fill-mode | 规定元素在动画开始前和完成后的状态，默认是 none。
定义动画各个阶段的状态的代码段。比如开始态，结束态，中间态（使用百分比表示）。
@keyframes exampleName {
from {
transform: rotateY(0deg);
background: #000000;
}
50% {
transform: rotateY(180deg);
background: #00fa7e;
}
to {
transform: rotateY(0deg);
background: #008dff;
}
}
animation-name
使用 @keyframes 定义的状态集合名称，如上面的 exampleName。
animation-duration动画的周期时间。单位可以是秒(s)，也可以是毫秒(ms)。
animation-timing-function动画变化速度函数，有如下几种选项：
linear: 速度不变。cubic-bezier(0,0,1,1)
ease-in: 低速开始 ~ 正常速度。cubic-bezier(0.42,0,1,1)
ease-out: 正常速度 ~ 低速结束。cubic-bezier(0,0,0.58,1)
ease-in-out: 低速开始 ~ 正常速度 ~ 低速结束。cubic-bezier(0.42,0,0.58,1)
ease: 与 ease-in-out 基本相同，但是开始稍微比结束快一点儿。cubic-bezier(0.25,0.1,0.25,1)
cubic-bezier(x1, y1, x2, y2): 使用三次贝塞尔函数作为速度函数。
animation-delaycubic-bezier曲线测试调试网站：cubic-bezier
动画开始之前等待的时间。单位可以是秒(s)，也可以是毫秒(ms)。
animation-iteration-count动画的循环次数。可以是具体的次数，也可以是 infinite，表示无限循环播放。
animation-direction动画循环的方向：
normal: 正向播放。
reverse: 反向播放。
alternate: 正向播放与反向播放交替进行。
animation以上6个属性可以使用这一个属性来表示，格式为：
animate: name duration timing-function delay iteration-count direction;animation-play-state
控制动画的状态，有播放(running)和暂停(paused)两种状态。
animation-fill-mode规定元素在动画开始前和完成后的状态。
none: 元素在动画前后的状态和动画没有联系。
forwards: 动画完成后，元素保持动画最后的状态。
backwards: 动画开始前，元素保持动画开始的状态。
both: forwards 和 backwards 的结合。
2. transitionCSS3 除了 animation 相关的属性以外，还提供给我们一个 transition 属性，格式为：
transition: propertyName duration [timing-function] [delay], ...;
大家可能已经也看出来了，其实 transition 就是 @keyframes 只有 from 和 to 两个状态，并且播放次数为1，且不能暂停的 animation。
举个例子，当鼠标放到一个 div 上的时候，它旋转90度，并且背景从黑色变为灰色，字体从白色变为黑色。
#division2 {
width: 300px;
height: 100px;
margin-top: 50px;
font-size: 2em;
text-align: center;
line-height: 100px;
color: #FFF;
background: #000;
transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}
#division2:hover {
background: #cccdd1;
color: #000;
transform: rotate(90deg);
}
3. Demo
[重要提示]请不要忘记推荐和收藏 (╯‵□′)╯︵ ┴─┴
git clone https://github.com/JasonKid/fezone.git
搜索 动画详解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111130.html
摘要：定义动画的名称。动画时长的百分比。在中，我们以百分比来规定改变发生的时间，或者通过关键词和，等价于和。其中，是动画的开始时间，动画的结束时间。规定完成动画所花费的时间，以秒或毫秒计。动画应该正常播放。 赞助我以写出更好的文章，give me a cup of coffee? 2017最新最全前端面试题 在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@ke...
摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解： 关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。 一、transform 属性： 旋转rotate（中...
摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...
阅读 2935·2021-11-25 09:43
阅读 2985·2021-11-23 09:51
阅读 3416·2019-08-30 13:08
阅读 1357·2019-08-29 12:48
阅读 3477·2019-08-29 12:26
阅读 296·2019-08-28 18:16
阅读 2438·2019-08-26 13:45
阅读 2288·2019-08-26 12:15
