CSS3动画

变换transform

transform: rotate旋转 | scale放大/缩小 | skew扭曲 | translate移动;
属性之间用空格隔开注意：不是逗号“，”

1.translate

translate(<translation-value>[, <translation-value>

图片19.png

translateX(<translation-value>)

图片20.png

translateY(<translation-value>)

图片21.png

2.旋转rotate

rotate(<angle>)

图片22.png

Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);

3.缩放scale

scale(<number>[, <number>])

图片23.png

scaleX(<number>)

图片24.png

scaleY(<number>)

图片25.png

4.扭曲skew

skew(<angle> [, <angle>])

图片26.png

skewX(<angle>)

图片27.png

skewY(<angle>)

图片28.png

改变元素基点transform-origin
transform-origin:X,Y
(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;

过渡transition

Transition: all 5s ease 0;
一、transition-property:
transition-property ： none | all | [ <IDENT> ]
二、transition-duration:
transition-duration ： <time> [, <time>]
<time>为数值，单位为s（秒）或者ms(毫秒),
三、transition-timing-function:
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2) 四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

图片29.png

四、transition-delay:
transition-delay ： <time> [, <time>]

animation

图片30.png

animation-name: 动画名称
animation-name: none | IDENT
IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开

animation-duration 动画持续时间
取值:<time>为数值，单位为s （秒.）其默认值为“0”
animation-timing-function: 动画速度
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
animation-delay: 动画延迟时间
取值为<time>为数值，单位为s(秒)，其默认值也是0。
animation-iteration-count 动画次数
animation-iteration-count:infinite无限次播放 | <number>
animation-direction 动画运动方向
animation-direction: normal | alternate(来回) | reverse(反向) | alternate-reverse(反向来回)
animation-fill-mode 动画填充模式
规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用，兼具forwards和backwards。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义），效果留在结束位置上。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义），效果留在刚刚那个位置。

animation-play-state: running/paused 动画的播放状态

Keyframes “关键帧”

@keyframes  动画的名称{ 
 from{}
to{}
}

@keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

图片32.png

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div{

width:200px;

height: 300px;

margin:20px auto;

position: relative;

}

div img{

position: absolute;

left: 0;

top:0;

width:200px;

height: 300px;

box-shadow: 6px 6px 2px #666;

transform-origin:bottom center;

/*transition: transform 2s linear;*/

transition: all 2s linear;

}

div:hover img:nth-child(1){

opacity: 0.2;

transform: rotate(-45deg);

}

div:hover img:nth-child(2){

opacity: 0.4;

transform: rotate(-30deg);

}

div:hover img:nth-child(3){

opacity: 0.3;

transform: rotate(-15deg);

}

div:hover img:nth-child(4){

opacity: 0.5;

transform: rotate(0deg);

}

div:hover img:nth-child(5){

opacity: 0.7;

transform: rotate(15deg);

}

div:hover img:nth-child(6){

opacity: 0.8;

transform: rotate(30deg);

}

div:hover img:nth-child(7){

opacity: 0.9;

transform: rotate(45deg);

}

div:hover img:nth-child(8){

opacity: 1;

transform: rotate(60deg);

}

</style>

</head>

<body>

<div>

![](img/1.jpg)

![](img/2.jpg)

![](img/3.jpg)

![](img/4.jpg)

![](img/5.jpg)

![](img/6.jpg)

![](img/7.jpg)

![](img/8.jpg)

</div>

</body>

</html>

阶跃函数

step(n,start/end)
from 开始状态 to 结束状态
将animation-timing-function改为steps

图片31.png

<style>
        div{
            width:260px;
            height: 220px;
            margin: 100px auto;
            background:url("img/pterodactyl.png") no-repeat;
            animation: myfly 1s steps(5) infinite;
        }
        @keyframes myfly{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1352px 0;
            }
        }
        div:hover{
            animation-play-state: paused;
        }
</style>