CSS动画

1.css动画实现的几种方式
transition
keyframes(animation)
2.过渡动画和关键帧动画的区别
过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细
3.如何实现逐帧动画
使用关键帧动画
去掉补间(steps)
4.css动画的性能
性能不坏 浏览器引擎写好的
部分情况下优于js(css优化空间不多)
js可以做到更好(可以优化的条件下)
部分高危属性 box-shadow等

animation-direction: reverse;
/*停的时候保持状态*/
animation-play-state: paused;
/*决定最后停在哪里*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;

可以指定一个动画的关键路径 中间的状态由css计算完成
相当于多个补间动画(要求元素有变化)
与补间动画不同,关键帧动画与元素状态的变化无关
定义更加灵活
transform
四大作用:缩放(scale) 位移(translate(XYZ)) 旋转(rotate(XYZ)) 倾斜 (skew)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 5,871评论 0 4
  • css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...
    刘松阳阅读 4,155评论 0 0
  • 本文并非原创,属于摘抄性质,并有个人的加工。 一、过渡动画 过渡(transition)动画,就是从初始状态过渡到...
    前端xiyoki阅读 14,016评论 1 13
  • 当我们看到设计精美的科技巨头网站(如Apple或微软)或特斯拉或梅赛德斯等汽车公司时,我们每个人都会感到震惊。 使...
    开心人开发世界阅读 4,402评论 0 3
  • 资深的程序员有丰富的项目经验。但是大多数人没有注意到的是,新手程序员也有自身很强的优势,新手所具有的优势是有充足的...
    九日照林阅读 3,950评论 2 0

友情链接更多精彩内容