文章目录
- 1.什么是css3动画
- 2.CSS3 @keyframes 规则(关键帧)
- 2.1@keyframes 规则是什么?
- 2.2@keyframes 规则的属性值
- 3.css3动画属性
- 4.实例
1.什么是css3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果,在 CSS3中，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以JavaScript.
2.CSS3 @keyframes 规则(关键帧)
如需在 CSS3 中创建动画，您需要首先学习 @keyframes 规则,即关键帧的创建方法。
2.1@keyframes 规则是什么?
@keyframes 规则(关键帧)可以用于创建动画。在需要实现某个动画效果之前首先在@keyframes 中设置某些属性的 CSS 样式，就能创建由当前样式逐渐改为需要的新样式的动画效果。
2.2@keyframes 规则的属性值
from: 即动画的开始
to: 即动画的完成
可以用百分比来规定变化发生的时间，0% 和 100% 等同于关键词 “from” 和 “to”,还可以将0%-100%,拆分为任意多的段,可以为任意段设置任意的样式,以达到动画效果分段显示的效果.
注意:
一个@keyframes 规则生效至少以下两项 CSS3 动画属性，即可将动画与选择器关联在一起：
规定动画的名称
规定动画的时长
3.css3动画属性
1. @keyframes 创建动画的规则即关键帧.
2. animation-name 规定 @keyframes 动画的名称。
3. animation-duration 规定动画完成一整个过程持续的时间,默认是从0开始,单位有秒(s) 和 毫秒(ms)。
4. animation-iteration-count 规定动画被播放的次数。
-可选值:
1 (默认值)
number (任意的正整数)
infinite (无限循环)
5. animation-delay 规定动画是否有等待时间 即 延迟时间。
默认是0 ,可以使是任意的正数,单位有秒(s) 和 毫秒(ms)。
6. animation-timing-function 规定动画的运动的时序函数。
-可选值:
ease 默认值,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速,后减速
cubic-bezier(.24,.95,.82,-0.88); ( 贝塞尔曲线)
steps()
可以传入两个参数，第一个正整数，将间隔动画等分成指定数目的小间隔动画，第二个参数可以是start 和 end ,两者结合可以达到动画分步骤执行的效果.
7.animation-direction 规定动画的运动方向。
-可选值:
normal 默认值 从from 向 to运行,每次都这样.
reverse 从to 向 from 运行,每次都这样.
alternate 从 from 向 to运行,重复执行动画时反向执行.
alternate-reverse 从 to 向 from 运行,重复执行动画时反向执行.
8.animation-play-state 设置动画的执行状态
-可选值:
running 默认值,动画执行
paused 动画暂停
9.animation-fill-mode 动画的填充模式
-可选值:
none 默认值 动画执行完毕,元素回到原来的位置
forwards 动画执行完毕,元素会停止在动画结束的位置
backwards 动画延迟等待时,元素会处于开始位置
10.animation 动画的简写属性
注意:属性写的顺序没有要求,除了 animation-duration 必需写在animation-dely 前面.
animation: name duration delay timing-function iteration-count direction fill-mode play-state;
animation:boke 1s 2s linear infinite alternate backwards running;
/* 其中1s 为动画持续时间,2s 为动画延迟时间,持续时间属性必须写在延迟时间属性之前*/4.实例
@keyframes 规则示例
@-ms-keyframes boke /* -ms-为了兼容IE 浏览器*/
{
0% {background: green;}
25% {background: yellow;}
50% {background: blue;}
100% {background: red;}
}
@-moz-keyframes boke /* -moz-为了兼容Firefox 浏览器*/
{
0% {background: green;}
25% {background: yellow;}
50% {background: blue;}
100% {background: red;}
}
@-webkit-keyframes boke /* -webkit-为了兼容Safari 和 Chrome 浏览器*/
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes boke /*-o-为了兼容 Opera浏览器 */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}整体效果实例
div
{
animation-name: boke;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}不同的浏览器为了实现兼容效果,需要在每一个animation属性前加上兼容前缀
简写属性实例
div
{
animation: boke 5s linear 2s infinite alternate;
-moz-animation: boke 5s linear 2s infinite alternate; /* 兼容Firefox浏览器 */
-webkit-animation: boke 5s linear 2s infinite alternate; /* 兼容Safari 和 Chrome:浏览器*/
-o-animation: boke 5s linear 2s infinite alternate;/* 兼容Opera:浏览器 */
-ms-animation: boke 5s linear 2s infinite alternate;/* 兼容IE: 浏览器*/
}
