CSS中的动画

作者: Juha | 来源:发表于2020-05-10 22:09 被阅读0次

    CSS中的变形都是一瞬间完成的事情,而不是一个动画过程。

    动画transition

    需要函数,动作触发

    transition-property

    all所有的属性都可以发生
    left只对left属性做变化,只有left发生变化时才有动画效果。


    transition-property transition-property样例

    transition-duration过渡效果持续时间

    transition-duration transition_duration样例

    transition-timing-function定义时间函数

    ease默认,两头慢中间快
    linear线性,匀速
    ease-in开始慢
    ease-out结束慢
    ease-in-out开始结束都慢,相对于ease两头幅度更大
    cubic-bezier (num,num,num,num)bezier曲线
    step-start
    step-end
    steps 几步,在start变化还是end变化


    image.png

    transition-delay

    设置延时的时间,可以设置一个和多个


    transition-delay transition-delay样例

    transition

    transition transition样例

    动画animation

    animation可以不使用hover等js触发,直接运行

    animation-name

    animation-name animation-name样例

    animation-duration动画执行的时间

    animation-duration

    animation-timing-function

    animation-timing-function

    animation-iteration-count执行次数

    animation-iteration-coun

    animation-direction动画方向

    animation-direction

    animation-play-state动画状态

    动画状态是暂停还是运动,可以结合hover使用,鼠标移上去的时候,动画是动还是暂停。
    running
    paused

    animation-play-state
    animation-delay

    动画延时


    animation-delay

    animation-fill-mode

    backwards动画在开始的时候是否要保持第一帧的状态,
    forward结束的时候保持结束的状态
    both开始的时候保持第一帧的状态,结束的时候保持结束的状态。

    animation-fill-mode animation-fill-mode样例

    animation

    所有属性在一起

    animation animation样例

    关键帧@keyframes

    @keyframes abc {
    from {opacity:1; height:100px;}
    to {opacity:0.5; height:200px;}
    }
    @keyframes abc {
    0% {opacity:1; height:100px;}
    100% {opacity:0.5; height:200px;}
    }
    from to 可以写成0%和100%
    @keyframe flash{
    0%,50%,100%{opacity:1;}
    25%,75% {opacity:0;}
    }
    flash会产生闪动效果
    需要调用


    keyframe keyframe关键帧样例

    相关文章

      网友评论

        本文标题:CSS中的动画

        本文链接:https://www.haomeiwen.com/subject/ufsefhtx.html