css中实现动画有两种方式:transition
过渡动画、animation
自定义动画。
transition 是 css3 新增的⼀个功能,可以实现元素不同状态间的平滑过渡(当元素从⼀个状态进⼊到另⼀个状态时),经常⽤来制作⼀些动画效果。
之前:元素 -> 元素:hover 状态直接切换,从开始状态到结束状态,瞬间完成,中间过程⼏乎不可⻅。
过渡:从开始状态到结束状态的中间过程可以查看
格式:
transition:过渡的属性 完成时间(s) 运动曲线 延迟时间
transition:all 3s(1s=1000ms) linear 0s;
transition 包含以下四个属性:
transition-property 过渡属性。如果希望所有的属性都发⽣过渡,就使⽤all
transition-duration 过渡的持续时间,单位是s或者ms
transition-timing-function 运动曲线。属性值取值:
ease 慢速开始,然后变快,然后慢速结束的过渡效果(默认 cubic-bezier(0.25,0.1,0.25,1))
linear 线性,以相同速度开始至结束的过渡效果(cubic-bezier(0,0,1,1))
ease-in 以慢速开始的过渡效果(cubic-bezier(0.42,0,1,1))
ease-out 慢速结束的过渡效果(cubic-bezier(0,0,0.58,1))
ease-in-out 以慢速开始和结束的过渡效果(cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值,https://cubic-bezier.com/
transition-delay 默认是0,单位为s,过渡延迟。多⻓时间后再执⾏这个过渡动画。
transition-duration 这个属性需要首先设置,否则时长为 0,就不会产生过渡效果。
1.圆过渡
.div-1{ width: 200px; height: 200px; border-radius: 50%; background-color: aqua; transition: all 3s; transition-timing-function: steps(3000,start); } .div-1:hover{ background-color: rgb(21, 255, 0); width: 400px; height: 400px; border-radius: 0%; }
2.钟表秒针
.clock{ background: url(img/clock.png); border-radius: 50%; width: 284px; height: 284px; position: relative; } .clock::before{ content: ""; width: 20px; height: 20px; background-color: black; transform: translate(-50%,-50%); top: 50%; left: 49.5%; position: absolute; border-radius: 50%; } .clock::after{ content: ""; width: 3px; height: 110px; background-color: black; position: absolute; left: 49.8%; top: 50%; transform: translate(-50%,-100%); border-radius: 70%; transform-origin: bottom; animation: rotate360 60s steps(60) infinite; } @keyframes rotate360 { to { transform: translate(-50%, -100%) rotate(360deg); } } /* .clock:hover::after{ transform: translateX(-50%) rotate(360deg); } */
3.圆过渡动画
.div-1{ width: 300px; height: 300px; background-color: royalblue; border-radius: 50%; /* 应用动画 */ animation-name: div_animate; /*制定动画名称*/ animation-duration: 2s; /*动画持续时间*/ animation-fill-mode: forwards; /*动画填充模式,forwards作用是将动画的样式停留在最后一个 */ animation-delay: 2s; /*动画延迟的时间,当值为负数时表示动画已经执行了多长时间*/ animation-direction: alternate; /*规定是否应该轮流反向播放动画。*/ animation-iteration-count: infinite; /*规定动画的速度曲线。*/ animation-timing-function: cubic-bezier(.97,.08,.35,.72);/*速度*/ } /* 定义动画规则 */ @keyframes div_animate{ from{ background-color:royalblue; margin-left: 0px; } to{ background-color: brown; margin-left: 500px; } }