CSS动画@animationend

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

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>



452fc0d979e945b6bc746cbab77564b3.gif


以上就是CSS动画感谢大家的阅读


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


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


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

相关文章
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
25天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
102 58
|
4天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
14 1
|
30天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
26 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
45 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
27 0
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
76 5
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果

热门文章

最新文章