关闭

CSS3动画animation讲解

85人阅读 评论(0) 收藏 举报
分类:
CSS动画基础
种类:  变形(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




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23545次
    • 积分:703
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:6篇
    • 译文:1篇
    • 评论:0条