CSS3 中的动画
来源:互联网 发布:www.杭州行知小学.com 编辑:程序博客网 时间:2024/06/13 22:22
动画是使元素从一种样式逐渐变化为另一种样式的效果。通过 CSS3,能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。通过 animation 相关动画属性完成整个 CSS3 动画效果。
1.@keyframes 指定动画名称和动画效果
@keyframes定义的动画名称用来被animation-name所使用。
定义动画时,简单的动画可以直接使用关键字from和to,即从一种状态过渡到另一种状态。
语法:
@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]
取值:
- <identifier>:identifier定义一个动画名称
- <keyframes-blocks>:定义动画在每个阶段的样式,即帧动画
示例:
@keyframes testanimations { from { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); }}/* 或者 */@keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); }}
2.animation-name 检索或设置对象所应用的动画名称
必须与规则 @keyframes 配合使用,因为动画名称由@keyframes定义。如果提供多个属性值,以逗号进行分隔。
语法:
animation-name:<single-animation-name>[,<single-animation-name>]
<single-animation-name> = none | <identifier>
取值:
- none:不引用任何动画名称
- <identifier>:定义一个或多个动画名称(identifier标识)
示例:
@keyframes slide{ 0%{transform:scale(0);opacity:0;} 40%{transform:scale(1);opacity:1;} 100%{opacity:1;}}@-webkit-keyframes slide{ 0%{-webkit-transform:scale(0);opacity:0;} 40%{-webkit-transform:scale(1);opacity:1;} 100%{opacity:1;}}.slide-box{ animation-name: slide;}
3.animation-duration 设置对象动画的持续时间
如果提供多个属性值,以逗号进行分隔。
语法:
animation-duration:<time>[,<time>]
取值:
- <time>:指定对象动画的持续时间
示例:
.slide-box{ animation-duration: .8s;}
4.animation-timing-function 设置对象动画的过渡类型
如果提供多个属性值,以逗号进行分隔。
语法:
animation-timing-function:<single-animation-timing-function>[,<single-animation-timing-function>]
<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
取值:
- linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start:等同于 steps(1, start)
- step-end:等同于 steps(1, end)
- steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
- cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
示例:
.slide-box{ animation-timing-function: ease-in;}
5.animation-delay 设置对象动画的延迟时间
如果提供多个属性值,以逗号进行分隔。
语法:
animation-delay:<time>[,<time>]
取值:
- <time>:指定对象动画延迟的时间
示例:
.slide-box{ animation-delay: .5s;}
6.animation-iteration-count 设置对象动画的循环次数
如果提供多个属性值,以逗号进行分隔。
语法:
animation-iteration-count:<single-animation-iteration-count>[,<single-animation-iteration-count>]
<single-animation-iteration-count> = infinite | <number>
取值:
- infinite:无限循环
- <number>:指定对象动画的具体循环次数
示例:
.slide-box{ animation-iteration-count: infinite;/* 无限循环 */}
7.animation-direction 设置对象动画在循环中是否反向运动
如果提供多个属性值,以逗号进行分隔。
语法:
animation-direction:<single-animation-direction>[,<single-animation-direction>]
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
取值:
- normal:正常方向
- reverse:反方向运行
- alternate:动画先正常运行再反方向运行,并持续交替运行
- alternate-reverse:动画先反运行再正方向运行,并持续交替运行
示例:
.slide-box{ animation-direction: reverse;/* 反方向运行循环 */}
8.animation-play-state 设置对象动画的状态
如果提供多个属性值,以逗号进行分隔。
语法:
animation-play-state:<single-animation-play-state>[,<single-animation-play-state>]
<single-animation-play-state> = running | paused
取值:
- running:运动
- paused:暂停
示例:
.slide-box{ animation-play-state: running;}
9.animation-fill-mode 设置对象动画时间之外的状态
如果提供多个属性值,以逗号进行分隔。
语法:
animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]
<single-animation-fill-mode> = none | forwards | backwards | both
取值:
- none:默认值。不设置对象动画之外的状态
- forwards:设置对象状态为动画结束时的状态
- backwards:设置对象状态为动画开始时的状态
- both:设置对象状态为动画结束或开始的状态
示例:
.slide-box{ animation-fill-mode: backwards;}
10.animation 复合属性,设置对象所应用的动画特效
如果提供多组属性值,以逗号进行分隔。
注意:如果只提供一个<time>参数,则为 <' animation-duration '> 的值定义;如果提供二个<time>参数,则第一个为 <' animation-duration '> 的值定义,第二个为 <' animation-delay '> 的值定义。
语法:
animation:<single-animation>[,<single-animation>]
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
取值:
- <' animation-name '>:检索或设置对象所应用的动画名称
- <' animation-duration '>:检索或设置对象动画的持续时间
- <' animation-timing-function '>:检索或设置对象动画的过渡类型
- <' animation-delay '>:检索或设置对象动画延迟的时间
- <' animation-iteration-count '>:检索或设置对象动画的循环次数
- <' animation-direction '>:检索或设置对象动画在循环中是否反向运动
- <' animation-fill-mode '>:检索或设置对象动画时间之外的状态
- <' animation-play-state '>:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式
示例:
.slide-box{ -webkit-animation:animations 2s ease-out forwards; animation:animations 2s ease-out forwards;}
- CSS3中的动画基础
- CSS3中的动画效果
- css3中的animation动画
- 什么是 CSS3 中的动画?
- CSS3 中的动画
- CSS3中的动画功能
- CSS3中的动画
- CSS3中的动画效果-------Day72
- CSS3中的动画功能之笔记
- css3中的变形和动画(3)
- CSS3中的变形与动画(下)
- CSS3中的变形与动画(上)
- CSS3中的变形与动画(下)
- css3动画
- css3动画
- css3动画
- css3动画
- css3动画
- Java注解编程
- Sed
- Lua脚本学习日记-01 (又开新坑)
- HDU-5945 Fxx and game (dp+单调队列)
- 用Servlet获取表单数据
- CSS3 中的动画
- 深度学习框架(分语言总结)
- vue-todolist-demo
- sublime text 3汉化教程
- ios 计算两个时间之间的时间差
- HDU 1796:How many integers can you find(容斥原理)
- H - Marriage is Stable 母函数模版题
- 《挑战》这本书写的真不错
- Python编写简易脚本文件