css3动画效果小结(推荐)

2020-04-28 07:18:59易采站长站整理

                box.style.transitionTimingFunction="ease-in-out";   
            };   
  
        }   
    </script>  
</head>  
<body>  
    <div id="box"></div>  
    <br>  
    <br>  
    <br>  
    <br>  
    <br>  
    <br>  
    <hr>  
    <br>  
    <br>  
    <br>  
    <div class="btn">  
        <button id="e1">ease</button>  
        <button id="e2">liner</button>  
        <button id="e3">ease-in</button>  
        <button id="e4">ease-out</button>  
        <button id="e5">ease-in-out</button>  
    </div>  
</body>  
</html>  

2、动画属性animation

animation: name duration timing-function delay iteration-count direction;

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。。

animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。