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>
</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>
