CSS 06 动画

css3动画 @keyframes关键帧

.rect{

width:100px;
height:100px;
background-color:red;
position:flexde;
animation: mymove 2s infinite;

}
@keyframes mymove{ //方法一 首帧和尾帧

from{
    top:0;
    left:20%;
}
to{
    top:0;
    left:80%;
}

}

@keyframes mymove{ //方法二 动画的不同阶段

0%{
    top:0;
    left:20%;
    background-color:blue;
}
25%{
    top:0;
    left:80%;
    background-colorr:green;
}
50%{
    top:80%;
    left:80%;
    background-color:black;
}
75%{
    top:80%;
    left:20%;
    background-color:yello;
}
100%{
    top:0;
    left:20%;
    background-color:red;
}

}
css3动画animation符合属性
animation-name: 指定使用哪一个动画

animation-duration: 动画运行的时间

animation-timing-function: linear; 匀速

​ ease ; 两头快，中间慢

​ ease-in-out、ease-in、ease-out

animation-delay: 延迟

animation-iteration-count: 循环次数；infinite 无限循环

animation-direction: normal 默认；alternate 动画反方向播放

复合写：

animation：mymove 3s 3;

css3动画综合实例
CSS 06 动画插图

CSS 06 动画插图1

Loading动画效果实例(一)

.spinner{

margin:100px auto;
width:50px;
height:60px;
text-align:center;
font-size: 10px;

}
.spinner > div{

background-color:#67CF22;
height:100%;
width:6px;
display:inline-block;
animation: mymove 1.2 infinite ease-out

}
.spinner >div:nth-child(2){

animation-delay: -1.1s;

}
.spinner >div:nth-child(3){

animation-delay: -1.0s;

}
.spinner >div:nth-child(4){

animation-delay: -0.9s;

}
.spinner >div:nth-child(5){

animation-delay: -0.8s;

}

@keyframes mymove{

0%,40%,100%{
    transform:scaleY(0.4);
}
20%{
    transform:scaleY(1)
}

}
Loading动画效果实例(二)
CSS 06 动画插图2

CSS 06 动画插图3

.spinner{

width:60px;
height:60px;
position:relative;
margin:100px auto;

}

.spinner > div{

width:100%;
height:100%;
background-color:#67CF22;
border-radius:50%;
opacity:0.6;
position:absolute;
top:0;
left:0;
animation:mya 2s infinite ease-out;

}

.spinner > div:nth-child(2){

animation-delay:-1s;      //尽量用负值，打开的时候不会出现卡顿

}

@keyframes mya{

0%,100%{
    transform:scale(0.0);
}
50%{
    transform:scale(1.0);
}

}