当前位置: 首页 > >

css动画属性有哪些

发布时间:

动画属性:animation

特点:不需要进行触发,只要调用关键帧就行了!!
属性:
1、animation-name:动画的名称;
2、animation-duration:动画持续的时间;
3、animation-timing-function:动画的类型;
4、animation-delay:动画延迟的时间;
5、animation-iteration-count:动画的运动次数;(默认运动一次,infinite 无限循环)
6、animation-direction:运动的方向;
属性值:
- reverse:反方向运行 ( 让关键帧从后往前执行 )
- - alternate:动画先正常运行再反方向运行,并持续交替运行
- - alternate-reverse:动画先反运行再正方向运行,并持续交替运行


7、 animation-play-state
属性值: paused暂停 running运动

常用的写法: animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间


制定动画关键帧:


    @keyframes 关键帧的名称{
    form{
    从哪里开始
    }
    to{
    到哪里结束
    }
    }

    @keyframes 关键帧的名称{
    0%{
    动画执行体
    }
    25%{
    动画执行体
    }
    50%{
    动画执行体
    }
    75%{
    动画执行体
    }
    100%{
    动画执行体
    }
    }



友情链接: