种类: 变形(transformation)、变换(transition)和动画(animation)
核心:动画名、关键帧
关键帧: 描述在整个动画过程中,会发生变化的属性列表(也就是,哪些属性会改变,如何改变以及什么时候改变)。
主要步骤:定义动画 、将其赋给指定的HTML元素(或元素)。
定义动画:
1、使用@keyframes 规则来声明关键帧。
2、给出动画命名 : run。
一、定义关键帧:
Transform:旋转rotate、扭曲skew、缩放scale和移动translate
1、关键字from 和 to; ( 一个对象从一个地方移动到另一个地方)
@keyframes run{
from {
transform: translateX(0);
}
to {
transform: translateX(800px);
}
}
2、或百分比
from - to 与 0% - 100% 同等意义
@keyframes run{
0% {
transform: translateX(0);
}
100% {
transform: translateX(800px);
}
}
二:将动画赋给HTML元素
animation 的参数或者是动画的一些属性:
1、animation-name: run; 关键帧的名
2、animation-duration: 2s; s/ms 时长
.person{
animation-name: run; 关键帧的名
animation-duration: 2s; 时长
}
三、更多的动画属性
1、animation-timing-function (动画的速度曲线)
linear : 动画从头到尾的速度是相同的。
ease : 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in : 动画以低速开始。
ease-out : 动画以低速结束。
ease-in-out : 动画以低速开始和结束。
2、animation-iteration-count (动画会重复播放多少 ,int)
3、animation-delay (动画的延迟执行时间s/ms)
4、animation-fill-mode (定义动画的停留的位置 )
none :不改变默认行为。
forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。
5、animation-play-state (属性规定动画正在运行还是暂停)
paused 规定动画已暂停。
running 规定动画正在播放。
6、animation-direction (动画进行的方向)
normal(正常) 0% - 100%
reverse(反转) 100% - 0%
alternate(交替) 0% - 100% 100% - 0%
alternate-reverse(交替反转) 100% - 0% 0% - 100%
7、transform-origin: 50% 20% 0; (x,y,z)(确定旋转中心)
left 以自身的左边为x起点
center 以自身的左边为center(50%)起点
right 、length 、%
四:动画简写
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
例子:animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;
五:兼容性(兼容性差,采用hack)
多数属性支持:IE10及以上,ff,
-webkit-,-o-, -ms- 或 -moz-
-webkit-transform : rotate(0deg); Safari 和 Chrome
-moz-transform : rotate(0deg); ff
-ms-transform : rotate(0deg); IE
-o-transform : rotate(0deg); -opera
transform : rotate(0deg); 统一标识语句
opera浏览器还有个比较怪异的地方,它偏爱@keyframes myrotate{...},而对@-o-keyframes myrotate{...}不感冒
Trident(IE内核)、Gecko(Firefox内核)、Webkit(Safari内核,Chrome内核原型,开源)、Presto+Blink(Opera前内核+现内核)
六:优点与缺点
1、CSS动画的transform矩阵是C++级的计算,性能更优
2、代码简洁
3、浏览器会对CSS3的动画做一些优化(比如专门新建一个图层来跑动画)
4、在动画控制上不够灵活
5、兼容性不好
6、做动画时候建议将js与css结合
七:学习网站
http://www.w3cplus.com/css3/CSS3-animation.html