animation
爱你妹心
丢儿锐醒
in非里特
奥特里特
破丝
肤锐母
animation用法 格式
animation: 动画名称 动画时间 动画曲线(linear,ease,steps) 延迟 播放次数(n,infinite) 动画方向(normal, alternate)
animation-play-state:状态(paused,running)
关键动画帧的写法格式
@keyframes 动画名称{
from{样式一}
to{样式二}
}
from,来自哪里,初始
to,去哪里,终止
来自东土大唐,要去西天取经
from东土大唐,to西天取经
效果
@keyframes turn_long{
from{
width: 300px;
}
to{
width: 800px;
}
}
div{
width: 300px;
height: 100px;
background-color: red;
animation: turn_long 1s linear;
}
关于动画的次数
animation: turn_long 1s linear 2 alternate;
如果次数为2
代表,300到800算一次
800到300算第二次
案例-旋转的风车
逻辑
使用变形
transform,旋转rotate,from 0 deg to 360 deg
<style>
@keyframes zhuan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
img{
animation: zhuan 1s linear infinite;
}
</style>
<div>
<img src="timg.jpg" alt="">
</div>
加载loading动画的实现
逻辑
先来五个DIV,分别给他们不同的颜色,相同的宽高,给圆角
让五个DIV浮动起来,给他们间距
开始动的设计
关键帧动画,起始,使用变形 transform:rotate(1:1),初始让五个盒子保持原有的长和宽
关键帧动画,终止,使用变形 transform:rotate(1:0.5),初始让五个的高度发生一半缩短
写动画效果
animation: 动画名称 1s ease infinite alternate
此时的动画的效果,会是五个DIV同步的变大和变小
可以给每一个盒子设置不同的延迟, animation-delay: 不同的豪秒数
代码
<style>
@keyframes longduan {
from{
transform:scale(1,1);
}
to {
transform: scale(1,0.5);
}
}
.con div{
height: 300px;
width: 60px;
background-color: red;
margin: 15px;
float:left;
border-radius:30px;
animation:longduan 1s ease infinite alternate;
}
.con div:nth-child(1){
background-color: gold;
}
.con div:nth-child(2){
background-color: blueviolet;
animation-delay: 200ms;
}
.con div:nth-child(3){
background-color: yellowgreen;
animation-delay: 400ms;
}
.con div:nth-child(4){
background-color: red;
animation-delay: 600ms;
}
.con div:nth-child(5){
background-color: pink;
animation-delay: 800ms;
}
.con{
width: 450px;
}
.clearfix:after{
content:"";
display: table;
clear:both;
}
</style>
<div class="con clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
loading...
</div>