CSS3 动画
1：什么是动画？
使元素从一种样式逐渐变化为另一种样式，即将多个过渡效果放在一起
动画是通过“关键帧”，来控制动画的每一步关键帧
1：动画执行的时间点
2：在该时间点上的样式是什么？
2：动画的使用步骤
1：声明动画
为动画起名
定义关键帧
2：使用动画
指定元素调用的动画名称及其各个参数属性
3：声明动画
@keyframes 动画名称 {
/*定义关键帧*/
0%{
/*定义动画开始元素的样式*/ }
50% {
/*定义动画执行到一半时元素的样式*/ }
100% {
/*定义全部完成时的样式*/ }
}
注意：因为动画是属于CSS3版本才有的，面对一些低版本的浏览器，我们则需要做一些兼容性处理：
@-webkit-keyframes { }
@-ms-keyframes { } /*ie*/
@-o-keyframes { } /*谷歌*/
@-moz-keyframes { } /*火狐*/
4：动画属性
1：animation - name
作用：指定调用动画的名称
2：animation - duration
作用：指定动画执行一个周期的时长
取值：以 ms 或者 s 为单位的数值
3：animation - timing - function
作用：用于指定动画的速度时间曲线函数
取值： ease， linear， ease - in， wase - out， ease - in -out
4：animation - delay
作用：指定动画的延迟单位
取值：以 ms 或者 s 为单位的数值
5：animation - iteration - count
作用：指定动画播放的次数
取值：
1：具体数字
2：infinite（无限循环）
6：animation - direction
作用：指定动画的播放方向
取值：
1：normal：默认值，正常从 0% - 100%结束
2：reverse：逆向播放，从 100% - 0%结束
3：alternate： 轮流播放，奇数次播放时，正向播放，偶数次播放时，逆向播放
7：简写方式：
animation： name duration timing-function delay iteration-count direction （name, duration 为必须项，后面其他为选填项）
8：animation - fill - mode
作用：规定动画在播放前或者播放后的状态
取值：
1：none 默认值
2：forwards 动画播放后，将保持在最后一个帧的状态上
3：backwrads 动画播放前，延时时间内，动画将保持在第一镇=帧的状态上
4：both forwards 与 backwrads 的结合体
9：animation - paly - state
作用：用来指定动画是处于播放还是暂停的状态
取值：
1：paused 暂停
2：running 播放
<style>
/*定义时间帧*/
@keyframes change{
0%{
background: yellow;
border-radius: 0px;
}
25%{
background: red;
border-radius: 50%;
}
50%{
background: skyblue;
border-radius: 0px;
}
75%{
background: #ddd;
border-radius: 50%;
}
100%{
background: blue;
border-radius: 0px;
}
}
#d1{
width:300px;
height: 300px;
border:2px solid red;
}
#d1:hover{
/* animation-name: change; /*指定调用动画*/
/* animation-duration: 5s; /*动画时长*/
/* animation-timing-function:linear; /*动画属性*/
/* animation-iteration-count:3; /*动画播放 3次 */
/* animation-direction:reverse; /*逆向播放*/
animation: change 5s linear 3 ; /*简写方式， 动画名称， 方式， 循环次数*/
}
</style>
</head>
<body>
<div id = "d1"></div>
</body>
一个动态时钟的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS做时钟</title>
</head>
<style>
#clock{
width: 400px;
height: 400px;
border: 5px solid blue;
border-radius: 50%; /*圆圈*/
margin: 0 auto;
position:relative; /*父元素做相对定位，好让子元素做绝对定位*/
}
#minute{
width: 10px;
height: 100px;
background-color:red;
position: absolute;
top:100px;
left:195px;
/*调用动画*/
animation:turn 3600s linear infinite; /*分针 ， 一小时动一个钟*/
transform-origin: center bottom; /*圆点在中心底下*/
}
#second{
width:6px;
height: 150px;
background-color: skyblue;
position: absolute;
top:50px;
left: 197px;
/* 调用动画 */
animation:turn 60s linear infinite; /*秒针，一轮 60秒*/
transform-origin: center bottom;
}
/* 动画 */
@keyframes turn{
0%{
transform: rotate(0deg); /*定义动画的一圈*/
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<div id = "clock">
<div id = "minute"></div>
<div id = "second"></div>
</div>
</body>
</html>动态时钟效果图：