css3里面一共有2种动画分别为animation和transition
animation动画属性有8个分别如下:
(1)animation-name:动画名称
(2)animation-duration:动画所需要的时间单位(s)
(3)animation-timing-function:动画效果
过渡函数,有如下几种:
liner :匀速
ease-in:减速
ease-out:加速
ease-in-out:先加速再减速
cubic-bezier:三次贝塞尔曲线
(4)animation-delay:在开始执行动画时需要等待的时间
(5)animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放
(6)animation-direction:默认为nomal,每次循环都是向前播放,(0-100),另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放
(7)animation-state:默认为running,播放,paused,暂停
(8)animation-fill-mode:定义动画开始之前和结束之后发生的操作,默认值为none,动画结束时回到动画没开始时的状态;forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;backwards,让动画回到第一帧的状态;both:轮流应用forwards和backwards规则。
animation用法
.box{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
animation: qjj 4s ease 1s infinite alternate ;
}
@keyframes qjj{
from{
width: 100px;
height: 100px;
}to{
width: 300px;
height: 200px;
margin: 50px;
border-radius: 50%;
}
}
/*第二种方法*/
@keyframes qjj{
0%{ width: 200px; }
20%{ width: 200px; }
40%{width: 200px; }
60%{ width: 200px; }
100%{ width: 200px; }
}
transition动画属性4个:
(1) transition-property: 定义要过渡的css属性
(2) transition-duration: 定义动画所在持续的时间
(3) transition-timing-function:定义动画运动曲线(参数和transition一样)
(4) transition-delay:定义动画延迟时间
transition基本用法
transition通常和hover等事件配合使用,由事件触发
.box{
width: 200px;
height: 200px;
background: yellowgreen;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transition: all 2s linear 2s;
}
.box:hover{
width: 300px;
height: 300px;
background: yellow;
transform: rotateZ(60deg);
}
transition和animation的主要区别
1.transition不能立即执行,animation不能用事件触发;
2.trasition不可以设定循环次数
transition的优点在于简单易用,animation功能比它强大很多,但是占用的资源自然也多,如果追求复杂更自由的动画,建议使用animation