当前位置: 首页 > Web前端 > CSS

css3-动画、转场、变形

时间:2023-03-30 15:26:47 CSS

!importantGithub上的10k都是优秀的帧动画flashjscss3效率高,可以用css3完成动画的时候绝对不用js1。动画定义-运行模式交给专业人士来做[关键帧]@keyframesmove(动画名称){from{left:0;}to{left:90%;}}@keyframesmove(动画名称){0{left:0;}30%{left:90%;}50%{}100%{}}2.动画调用animation-name:动画名称;动画持续时间:3s;动画持续时间动画填充模式:转发;动画填充,最后一帧的位置向前向后animation-timing-function:linear;动画时间曲线线性缓动ease-instepsanimation-delay:1s;动画延迟animation-iteration-count:infinite(endless);动画重复次数animation-direction:alternate-reverse;动画运行方向animation-plat-state:running;动画的运行状态3.动画的企业级应用【animate.css】官网:https://animate.style/企业级开发的狮虎,我们一般把动画的定义和调用交给动画给第三方,我们只需要添加样式1.安装,使用链接导入2.Apply查看官网,给元素添加自己喜欢的class

transitiontransition-property:all;transition属性transition-duration:2s;Durationtransition-delay:1s;延迟时间transition-timing-function:linear;时间曲线过渡:属性durationdelaylinear;transition和animation动画的区别是需要定义关键帧【可以同时定义多个属性和多个时间段】更细粒度的控制】transition不需要声明关键帧,transitions也可以控制多个属性,但无法精细控制多个时间段;transitions需要有触发行为,一般是hoverdeformationtransform:变形函数;rotate(xdeg)旋转deg表示度数rotateZrotateYrotateXscale(x,y)缩放函数skew()拉伸函数translate()平移函数