28、css3动画animation@keyframes的使用

html部分

// 给要动的部分加class

class部分

// 添加动画  默认第一行jike,其他做兼容
.animation{
    animation: slogan_css 1s ease-in-out infinite;
    -webkit-animation: slogan_css 1s ease-in-out infinite
    -moz-animation: slogan_css 1s ease-in-out infinite;     /* Firefox-火狐浏览器 */
    -webkit-animation: slogan_css 1s ease-in-out infinite;  /* Safari 和 Chrome   苹果和谷歌浏览器*/
    -o-animation: slogan_css 1s ease-in-out infinite;       /* Opera   QQ浏览器 */
}
// 定义动画  slogan_css   是动画的名称
@keyframes slogan_css {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(1.1)
    }
    50% {
        transform: scale(1)
    }
    75% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1)
    }
}

//动画的几个属性
translate       位置     (10px,100px)     两个值
rotate          旋转    （15deg）         一个值    括号内旋转度数
scale           放大    （1.5）           一个值    括号内写倍数
skew            扭曲    （51deg,10deg）   两个值
matrix          矩阵    （1,2,3,4,5,6）   六个值

number: 循环的次数
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
none:默认值，不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画开始或结束时的状态
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
animation-duration:3s; 动画完成使用的时间为3s

image.png

image.png