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