淘先锋技术网

首页 1 2 3 4 5 6 7

一、Animation 属性(动画)

Animation 是 CSS3 属性中,除了 transform、transiton 之外的一个动画属性。

具体有:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。


二、庖丁解牛

2.1 animation-name

语法: animation-name: none | index; 规定需要绑定到选择器的 keyframe 名称。

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。

它的规则是 @keyframes 名称 {...} (注意要加 s,不然无法识别规则。)

有两种写法,一种是 0% - 100%,中间可以创建多个百分比给元素加上动画效果。

假设自定义 keyfram 名称为:index css @keyframes index { 0% { } 50% { } 100% { } }

另外一种写法是,from - to,from 相当于 0%,to 相当于100%,中间正常添加百分比。 css @keyframes index { from { } 50% { } to { } }

2.2 animation-duration

语法: animation-duration: time;

规定完成动画所花费的时间(持续时间),单位为秒或毫秒。

2.3 animation-timing-function

语法: animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

规定动画的速度曲线。

2.4 animation-delay

语法: animation-delay: time;

规定在动画开始之前的延迟时间,单位为秒或毫秒。

2.5 animation-iteration-count (迭代次数)

语法: animation-iteration-count: infinite | number;

规定动画应该反复播放的次数(迭代次数)

2.6 animation-direction (播放方向)

语法: animation-direction: normal | reverse | alternate | alternate-reverse;

规定动画播放的方向。

normal:默认值,正向播放。

reverse:反向播放。

alternate:偶数次反向播放、奇数次正向播放。

alternate-reverse:奇数次反向播放、偶数次正向播放。

2.7 animation-fill-mode (填充模式)

语法: animation-fill-mode: none | forwards | backwards | both;

规定动画在播放之前或之后,其动画效果是否可见。

none:不改变默认行为。

forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

2.8 animation-play-state (播放状态)

语法: animation-play-state: running | paused

规定动画正在运行还是暂停,即控制动画播放状态。

running:默认值,动画正常播放。

paused:动画暂停。


三、小试牛刀

html: ```html

Animation

css .box { width: 100px; height: 100px; background-color: pink; animation: index 2s ease-in .2s 3 normal both; } @keyframes index { from { width: 200px; } 50% { height: 200px; } to { transform: rotate(180deg); } } ```


四、浏览器兼容性