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动画感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~！

关注收藏博客 作者会持续更新…