内容简介:Animation 是 CSS3 属性中,除了 transform、transiton 之外的一个动画属性。具体有:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。语法:
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
@keyframes index { 0% { /* ... */ } 50% { /* ... */ } 100% { /* ... */ } } 复制代码
另外一种写法是,from - to,from 相当于 0%,to 相当于100%,中间正常添加百分比。
@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:
<div class="box">Animation</div> 复制代码
.box { width: 100px; height: 100px; background-color: pink; animation: index 2s ease-in .2s 3 normal both; } /* @keyframes index { 0% { width: 200px; } 50% { height: 200px; } 100% { transform: rotate(180deg) } } */ @keyframes index { from { width: 200px; } 50% { height: 200px; } to { transform: rotate(180deg); } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 深度解析属性动画的思想 - 带你手动实现属性动画框架
- 【Android 动画】动画详解之属性动画(三)
- 【Android 动画】动画详解之属性动画(五)
- 初识属性动画——使用Animator创建动画
- Android 属性动画的原理及应用
- 每日一道面试题(第7期)---Android补间动画与属性动画的区别
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Practical JavaScript, DOM Scripting and Ajax Projects
Frank Zammetti / Apress / April 16, 2007 / $44.99
http://www.amazon.com/exec/obidos/tg/detail/-/1590598164/ Book Description Practical JavaScript, DOM, and Ajax Projects is ideal for web developers already experienced in JavaScript who want to ......一起来看看 《Practical JavaScript, DOM Scripting and Ajax Projects》 这本书的介绍吧!