@keyframesanimation

Posted 2021-01-30 zsj-02-14

通过@keyframes规则，可以创建动画

原理：将一套css样式逐渐变为另一套css样式

用法：以百分比或“from”、“to”关键字来控制动画开始和结束。在动画过程中，可以多次改变这套css样式

animation是一个简写的属性，主要用于设置6个动画属性：

• animation-name:需要绑定到选择器上的keyframe的名字
• animation-duration:完成动画所花费的时间（s、ms）
• animation-timing-function:动画的速度曲线
• animation-delay:动画开始之前的延迟，允许负值，-2s使动画马上开始，但是跳过2s进入动画
• animation-interation-count:动画应该播放的次数，几次或无数次  （n、infinite）
• animation-direction:是否轮流反向播放动画，正常播放、轮流反向播放（normal、alternate）

 

    .draw-move{
            animation: open 0.2s linear 0.5s infinite alternate;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
            -webkit-animation: open 0.2s linear 0.5s infinite alternate;
            -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        @keyframes open{
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0.9);
            }
        }
        @-webkit-keyframes open{
            0% {
                -webkit-transform: scale(1);
            }
            100% {
                -webkit-transform: scale(0.9);
            }
        }

 

animation-timing-function可能的值：

linear	动画从头到尾的速度都是相同的（匀速）
ease	默认。动画以低速开始，中间加快，在结束前又变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以速度开始以低速结束
cubic-bezier(n,n,n,n)	自定义值，可能的值为0到1之间的数字