缓动动画
小球下落效果
@keyframes bounce {
60%, 80%, 100% {
transform: translateY(80px);
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
}
70% {
transform: translateY(60px);
}
90% {
transform: translateY(70px);
}
}
.ball {
width: 20px;height:20px;background:orange;border-radius:50%;margin: 0 auto;
animation: bounce 3s cubic-bezier(.755, .05, .855, .06) infinite;
}
三次贝塞尔曲线可视化:https://cubic-bezier.com
输入框提示效果
一些提示,比如只能输入数字
<div class="input-wrap">
<input></input>
<div class="callout">一些提示,<br/>比如只能输入数字</div>
</div>
.input-wrap {
height: 24px;
position: relative;
}
.input-wrap .callout {
background: pink;
position: absolute;
left: 185px;
top: 0;
transform: scale(0);
transition: .25s transform;
}
.input-wrap input:focus + .callout{
transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
transform: scale(1);
}
逐帧动画
loading效果
网上随便找的一个马跑步素材:
利用该素材实现逐帧动画:
核心原理:background-position和steps
@keyframes loading {
from {
background-position: 0;
}
to {
background-position: -550px; // 图片总宽度
}
}
animation: run 2s steps(4) infinite; // 有4帧,所以为steps(4)
闪烁效果
animation: blink 1s steps(1) infinite;
打字动画
CSS is awesome!123456789123456
打字动画实际上是文字逐个显示动画+光标闪烁动画
@keyframes typing {
from {
width: 0;
}
}
h1 {
width: 15ch;
overflow: hidden;
white-space: nowrap;
animation: typing 15s steps(15);
}
animation: typing 15s steps(15);
状态平滑的动画
animation-play-state: pause;
沿环形路径平移的动画
方案一
用内层的变形来抵消外层的变形效果。
![](/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg)
<div class="path">
<div class="avatar">
<img src="/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg">
</div>
</div>
@keyframes spin {
to {
transform: rotate(1turn);
}
}
.path {
width: 100px;
height: 100px;
background: orange;
border-radius: 50%;
}
.avatar {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
animation: spin 3s infinite linear;
transform-origin: 50% 50px; /* 50px 是背景圆形的半径 */
}
.avatar img {
animation: inherit;
animation-direction: reverse;
}
方案二
使用translate模拟transform-origin,从而不需要在Img外层多嵌套一个元素。
![](/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg)
<div class="path">
<img src="/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" class="img">
</div>
.path {
width: 100px;
height: 100px;
background: orange;
border-radius: 50%;
}
.img {
width: 20px;
height: 20px;
position: relative;
left: 40px;
border-radius: 50%;
animation: spin2 3s infinite;
}
@keyframes spin2 {
from {
transform: translateY(50px)
rotate(0turn)
translateY(-50px)
translateY(50%)
rotate(1turn)
translateY(-50%)
}
to {
transform: translateY(50px)
rotate(1turn)
translateY(-50px)
translateY(50%)
rotate(0turn)
translateY(-50%)
}
}
如果一开始头像就位于圆心,上面的css代码可简化:
也就是把translateY(50px) translateY(-50%)去除,这两句做的实际上就是把头像移到圆心。
@keyframes spin2 {
from {
transform: rotate(0turn)
translateY(-50px)
translateY(50%)
rotate(1turn)
}
to {
transform: rotate(1turn)
translateY(-50px)
translateY(50%)
rotate(0turn)
}
}
标签:动画,rotate,translateY,效果,50%,transform,animation,css
From: https://www.cnblogs.com/duanlvxin/p/17155442.html