33.CSS3动画效果
第二十六章 CSS3动画效果
一、动画简介
CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现。之前学的transform属性只能通过指定属性的初始状态和结束状态实现动画效果，有一定局限性。
animation实现动画效果有两个部分组成
1、通过类似Flash动画中的关键帧声明一个动画
2、在animation属性中调用关键帧声明的动画
CSS3提供的animation是一个复合属性，它包含多种子属性，如下
属性 说明
animation-name 用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes规则CSS加载时会应用animation-mame指定动画，从而执行动画
animation-duration 用来设置动画播放时间
animation-timing-function 用来设置动画播放方式
animation-delay 用来指定动画的延迟时间
animation-iteration-count 用来指定动画播放的循环次数
animation-direction 用来指定动画的播放方向
animation-play-state 用来控制动画的播放状态
animation-fill-mode 用来设置动画的时间外属性
animation 以上的简写形式
除了这9个属性外，还有一个重要的属性，就是关键帧属性，@keyframes,他的作用是声明一个动画，然后在animation调用关键帧声明动画。
//基本格式，"name"可自定义
@keyframes name{
/*......*/
}
二、属性详解
在讲解动画属性之前，先创建一个基本的样式 //一个div属性
<div>我是HTML5</div>
//设置CSS
div{
width:200px;
height:200px;
background-color: white:
border:1px solid green;
}
1、@keyframes 创建动画的第一步，先声明一个动画关键帧
@keyframes myani{
0%{
background-color: white;
margin-left:100px;
}
50%{
background-color: black;
margin-left :100px;
}
100%{
background-color: white;
margin-left:100px;
}
}
也可以合并到一起
@keyframes myani{
0%,100%{
background-color: white;
margin-left:100px;
}
50%{
background-color: black;
margin-left :100px;
}
}
也可以写成
form{ //起始
background-color: white;
margin-left:100px;
}
to{ //终点
background-color: black;
margin-left :100px;
}
2、animation-name //调用@keyframes动画
animation-name：myani;
属性值 说明
none 默认值，没有指定任何动画
INDEX 是由@keyframes指定创建的动画名称
3、animation-duration //设置动画播放时间
animation-duration：1s;
4、animation-timing-function //设置缓动
animation-timing-function：ease-in；
属性值 说明
ease 默认值，元素样式从初始状态过渡到种植状态时速度由快到慢，等同于贝塞尔曲线（0.25,0.1，0.25，1.0）
linear 。。速度恒定，贝塞尔曲线（0.0,0.0,1.0,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）
5、animation-delay //设置延迟的时间
6、animation-iteration-count //设置循环次数
属性值 说明
次数 默认值为1
infinite 表示无限次循环
7、animation-direction //设置缓动方向交替
属性值 说明
normal 默认值，每次播放向前
alternate 一次向前，一次向后相互交替
8、animation-play-state //设置停止播放画面
animation-play-state：paused;
9、animation-fill-mode //设置结束后不返回
属性值
none 默认值，表示按预期进行和结束
forward 动画结束后继续应用最后关键帧位置，即不返回
backforwards 动画结束后迅速应用起始关键帧位置，即返回
both 根据情况产生forwords或backforwords的效果
六、简写和版本
//简写形式完整版
animation：myani 1s ease 2 alternate 0s both;
为了兼容旧版本，需要加上浏览器前缀
Opera Firefox Chrome Safari IE
支持需带前缀 15～29 5～15 4～42 4～8 无
支持不带前缀 无 16+ 43+ 无 10.0+
//兼容完整版，Opera在这个属性上加入webkit，所以没有-o-
-webkit-animation：myani 1s ease 2 alternate 0s both;
-moz-animation：myani 1s ease 2 alternate 0s both;
-ms-animation：myani 1s ease 2 alternate 0s both;
transition:all 1s ease 0s;
//@keyframes 也需要加上前缀
-webkit-keyframes myani{...}
-moz-keyframes myani{...}
-o-keyframes myani{...}
-ms-keyframes myani{...}
keyframes myani{...}
例、
@charset "utf-8"
body{
margin:100px;
}
div{
width:200px;
height:200px;
background:white;
border:1px solid green;
animation-name: myani;
animation-duration: 1s;
animation-timing-function:ease-in;
/*animation-delay: 1s;*/
/* animation-iteration-count: infinite;*/
}
@keyframes myani{
0%,100%{
background-color: white;
margin-left:0px;
}
50%{
background-color: black;
margin-left :100px;
}
/* form{
background-color: white;
margin-left:100px;
}
to{
background-color: black;
margin-left :100px;
}*/
}
