CSS动画@animationend

CSS动画 是什么？

CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。

这里感兴趣的可以去了解针 动画是什么

常用的css动画属性

:transitionend

-transition: 过渡动画
-transition-property : 属性
-transition-duration : 间隔
-transition-timing-function : 曲线
-transition-delay : 延迟

animationend

-animation / keyframes
-animation-name : 动画名称，对应 @keyframes
-animation-duration : 间隔
-animation-timing-function : 曲线
-animation-delay : 延迟
-animation-iteration-count : 次数
-infinite : 循环动画
-animation-direction : 方向
-alternate : 反向播放
-animation-fill-mode : 静止模式
-forwards : 停止时，保留最后⼀帧
-backwards : 停止时， 回到第⼀帧
-both : 同时运用 forwards / backwards

动画属性: 尽量使用动画属性进行动画， 能拥有较好的性能表现

-translate
-scale
-rotate
-skew
-opacity
-colo

实例

animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：

 <style>
        @keyframes ball {
    
    
            0% {
    
     top: 0px; left: 0px;}
            50% {
    
     top: 200px; left: 200px;}
            100% {
    
     top: 0px; left: 0px;} // 回到初始的位置
        }
        div {
    
    
            width: 50px;
            height: 50px;
            border: 10px solid red;
            position: relative;
            animation-name: ball;
        }
    </style>

以上就是CSS动画感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…