CSS动画

作者: 没了提心吊胆的稗子 | 来源:发表于2019-08-16 21:03 被阅读0次

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)

相关文章

  • CSS-3D知识

    1.CSS动画 1.1 CSS动画属性-animation animation:为CSS动画属性,使用该属性可以替...

  • Css动画 小球横移

    学习css 动画,建立小球左右横移的动画原料:html5 Css3html CSS css 动画属性介绍 其中an...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • Vue.js 过渡动画

    1. css实现过度 transition 动画 css-transform动画 动态组件 上述动画,如果设置mo...

  • 前端开发入门到实战:CSS动画@keyframes的用法

    CSS动画 CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash! 动画浏览器支持 ...

  • 2018-06-13

    Css动画: css3动画主要包括Transform、Transition、Animation 区别 transi...

  • 2018-08-15

    CSS动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

网友评论

      本文标题:CSS动画

      本文链接:https://www.haomeiwen.com/subject/ohhcsctx.html