CSS动画属性animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
方式一:
@keyframes 动画名称 {
from{ 开始样式 }
to{ 结束样式 }
}
方式二:使用百分比
@keyframes 动画名称{
0% {0%时候样式}
25% {25%时候样式}
50% {50%时候样式}
100% {100%时候样式}
}注意:
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画
animation-direction:alternate 动画轮流反向播放案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
/*语法*/
/*animation:动画名称 执行一次完整动画需要花费的时间 运动曲线 延时多久开始执行动画 播放次数 是否反方向执行动画;*/
/*animation: move1 2s ease 2s infinite alternate;*/
/*animation-iteration-count:infinite; 无限循环播放*/
/*animation-play-state:paused; 暂停动画*/
/*animation-direction:alternate 动画轮流反向播放*/
animation: move2 2s ease 0s infinite;
}
/*定义动画*/
/*方式一:
@keyframes 动画名称 {
from{ 开始样式 }
to{ 结束样式 }
}*/
@keyframes move1{
from{
}
to{
background:blue;
transform: translateX(1000px) rotate(360deg);
}
}
/* 方式二:使用百分比 可以根据需要写需求的百分比
@keyframes 动画名称{
0% {0%时候样式}
25% {25%时候样式}
50% {50%时候样式}
100% {100%时候样式}
} */
@keyframes move2{
0% {
width: 100px;
height: 100px;
background: red;
}
25% {
transform: translateX(1000px);
background: blue;
}
50% {
transform: translateX(1000px) translateY(500px);
background: yellow;
}
75% {
transform: translateX(0px) translateY(500px);
background: orange;
}
100% {
transform: translateX(0px) translateY(0px);
background: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
