animation属性值(有六个):
语法:animation: name duration timing-function delay iteration-count direction;
一、animation-name:规定需要绑定到选择器的 keyframe 名称
取值:
none:(默认)规定无动画效果(可用于覆盖来自级联的动画)
keyframename:规定需要绑定到选择器的 @keyframe 的名称
二、animation-duration:规定完成动画所花费的时间 以秒或毫秒计
取值:2s(两秒)
time:规定完成动画所花费的时间 默认值是 0 意味着没有动画效果
三、animation-timing-function:规定动画的速度曲线
取值:
ease:默认。动画以低速开始,然后加快,在结束前变慢
linear:动画从头到尾的速度是相同的
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始和结束
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值 可能的值是从 0 到 1 的数值
四、animation-delay:规定在动画开始之前的延迟
取值:
time:(可选)定义动画开始前等待的时间 以秒或毫秒计 默认值是 0
五、animation-iteration-count : 规定动画应该播放的次数
取值:
n:定义动画播放次数的数值
infinite:规定动画应该无限次播放
六、animation-direction :规定是否应该轮流反向播放动画
取值:
normal:默认值。动画应该正常播放
alternate:动画应该轮流反向播放
1、使用@keyframes规则定义动画
如1:上下漂浮动画
@keyframes float-vertical {
0% {
transform: translate3d(0, 0%, 0);
}
25% {
transform: translate3d(0, 5%, 0);
}
75% {
transform: translate3d(0, -5%, 0);
}
100% {
transform: translate3d(0, 0%, 0);
}
}
2、给要使用动画的地方加:
.s-ranking {
animation: float-vertical 1.5s infinite linear;
}
如2:呼吸动画
// scale-breathe这个是可以随意起的名字
@keyframes scale-breathe {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
使用:
&NEXT {
animation: scale-breathe 2s infinite linear;
}
如3:渐变动画
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
使用:
&-top {
animation: fade-in 3s;
}
如4:滚动动画
@keyframes roll-in {
0% {
transform: translate3d(-5rem, 0, 0) rotate(740deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(0);
}
}
使用:
&hat {
animation: roll-in 2s linear;
z-index: 10;
}