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

CSS动画_1

时间:2023-03-30 18:01:44 CSS

动画一)简介1.由于目前的动画技术还不稳定,所以必须要考虑浏览器的兼容性问题。2.写动画不需要任何js基础。3、通过@keyframes定义动画,并在一定时间内改变css的属性4)语法1、定义动画【style标签内部定义】@keyframes动画名称{from{}//from为关键帧,其中动画开始到{}//到是关键帧,动画结束的地方}==>等价于@keyframes动画名{0%{}100%{}}@keyframes动画名{0%{}25%{}50%{}75%{}100%{}}使用百分比好处是不仅可以标记开始位置和结束位置的关键帧,还可以在某个需要使用的地方设置关键帧animationanimation-name动画名称(在@keyframes中定义的动画名称)animation-duration动画持续时间,单位秒animation-delay动画延迟时间,单位秒,即当前文件在浏览器中第一次打开后多少秒??,动画会再执行一次-iteration-countanimationtimesinfiniteinfinitytimesn[integer]规定动画执行n次animation-timing-functionanimationspeedcurvelinearlinear[uniformspeed]ease-in先慢后快ease-out先快后慢ease-in-out先慢后快再慢steps(5)逐帧动画animation-fill-mode动画动画结束时向前填充,元素停在结束位置backwards默认动画结束时,元素停在起始位置animation-play-state动画播放和pauserunningplaypausedpause可以实现光标悬停在元素上后,元素暂停动画播放动画草图:animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state2.动画库animate.css1)下载1.通过npm【包管理机制】>npminstall--saveanimate.csselement-uiaxiosjQueryboostrap2.通过cdn引入在线链接[使用需要联网]bootcdnxxxcdn2)在要使用的标签中添加类名

3.Transitiontransition1)简介1.Transition总是需要触发的,一般通过:hover2.Transition不需要设置关键帧。简单的动画效果一般使用transition,复杂的动画效果一般使用animation2)语法transition-propertyTransition属性名属性名不能设置none,可以设置一个属性名width,也可以设置多个属性名width,height。..可以设置所有属性名alltr??ansition-durationtransitiontimeseconds/milliseconds1s/1000mstransition-delaytransitiondelaytimesecond/millisecond1s/1000mstransition-timing-functionTransitionspeedcurveeaseease-inease-outease-in-outease-in-outlinear[默认值]stepstransition简写:transition-propertytransition-durationtransition-timing-functiontransition-delay例如:transition:all3ssteps(8)2秒;4.变形transform1)语法div{transform:xxx();变换原点:中心;}transform对元素进行某种类型的变换transform-origin元素变换的原点中心--默认左top2)类别1.Rotaterotaterotate(45deg)=rotateZ()rotateX(angle)rotateY(angle)rotateZ(angle)2.倾斜倾斜skewX(angle)skewY(angle)3.scalescalescale(2)x,y轴同时缩放(centerZoom)scale(x,y)如果值小于1,则缩小,如果大于1,则放大4倍。移动translatetranslate(x)==translateX()translate(x,y)translateX(100px)translateY()