内容简介: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补间动画与属性动画的区别
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Making Things See
Greg Borenstein / Make / 2012-2-3 / USD 39.99
Welcome to the Vision Revolution. With Microsoft's Kinect leading the way, you can now use 3D computer vision technology to build digital 3D models of people and objects that you can manipulate with g......一起来看看 《Making Things See》 这本书的介绍吧!