如何在CSS中制作多步简单动画?
How to make a multi-step simple animation in CSS?
我想在屏幕中央使用 CSS 实现以下动画:
- 文本 "Hello" 淡入
- 文本 "Hello" 淡出
- 小圆圈出现并变为较大的矩形
我实现了第三步如下:
.step3 {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: blue;
animation-name: stretch;
animation-duration: 10s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: 1;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
border-radius: 100%;
}
100% {
transform: scale(1.5);
}
}
<div class="step3"></div>
我正在阅读有关 animate.css
可用于淡入和淡出文本的信息:
<div class="animated fadeIn 1">Hello</div>
但是我怎样才能按顺序淡出这段文字呢?我怎样才能将所有 3 个步骤按顺序排列?
您需要在此处阅读有关两个属性的信息
1.动画延迟
2.动画填充模式
动画延迟会导致动画在一段时间后开始,所以基本上你可以在第一个动画结束后开始第二个动画
您可以在此处阅读动画填充模式https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
position: absolute;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items:center;
justify-content: center;
}
.text{
font-size: 3em;
/*animation: showfade 4s linear 2s both;*/
animation-name: showfade;
animation-duration: 4s;
animation-delay: .4s;
animation-fill-mode: both;
}
.rect {
background-color: #07f;
width: 200px;
height: 200px;
/*animation: rect 2s linear 6s both;*/
animation-name: rect;
animation-duration: 2s;
animation-delay: 4.4s;
animation-fill-mode: both;
}
@keyframes showfade {
0%, 100% {
opacity: 0;
}
50% {
opacity: 100;
}
}
@keyframes rect {
from {
transform: scale(0);
border-radius: 100%;
}
}
<div class="text">Hello</div>
<div class="rect"></div>
如果我理解正确的话,你可以这样做:
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh;
}
.step3 {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
width: 250px;
border-radius: 50%;
animation: stretch 10s 3s ease-out forwards;
}
.step3 > span {
opacity: 0;
animation: fadeInOut 3s;
}
@keyframes stretch {
0%, 100% {transform: scale(.3); background: blue}
100% {
transform: scale(1.5);
border-radius: 0;
}
}
@keyframes fadeInOut {
50% {opacity: 1}
100% {opacity: 0}
}
<div class="step3"><span>Hello</span></div>
我想在屏幕中央使用 CSS 实现以下动画:
- 文本 "Hello" 淡入
- 文本 "Hello" 淡出
- 小圆圈出现并变为较大的矩形
我实现了第三步如下:
.step3 {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: blue;
animation-name: stretch;
animation-duration: 10s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: 1;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
border-radius: 100%;
}
100% {
transform: scale(1.5);
}
}
<div class="step3"></div>
我正在阅读有关 animate.css
可用于淡入和淡出文本的信息:
<div class="animated fadeIn 1">Hello</div>
但是我怎样才能按顺序淡出这段文字呢?我怎样才能将所有 3 个步骤按顺序排列?
您需要在此处阅读有关两个属性的信息 1.动画延迟 2.动画填充模式
动画延迟会导致动画在一段时间后开始,所以基本上你可以在第一个动画结束后开始第二个动画
您可以在此处阅读动画填充模式https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
position: absolute;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items:center;
justify-content: center;
}
.text{
font-size: 3em;
/*animation: showfade 4s linear 2s both;*/
animation-name: showfade;
animation-duration: 4s;
animation-delay: .4s;
animation-fill-mode: both;
}
.rect {
background-color: #07f;
width: 200px;
height: 200px;
/*animation: rect 2s linear 6s both;*/
animation-name: rect;
animation-duration: 2s;
animation-delay: 4.4s;
animation-fill-mode: both;
}
@keyframes showfade {
0%, 100% {
opacity: 0;
}
50% {
opacity: 100;
}
}
@keyframes rect {
from {
transform: scale(0);
border-radius: 100%;
}
}
<div class="text">Hello</div>
<div class="rect"></div>
如果我理解正确的话,你可以这样做:
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh;
}
.step3 {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
width: 250px;
border-radius: 50%;
animation: stretch 10s 3s ease-out forwards;
}
.step3 > span {
opacity: 0;
animation: fadeInOut 3s;
}
@keyframes stretch {
0%, 100% {transform: scale(.3); background: blue}
100% {
transform: scale(1.5);
border-radius: 0;
}
}
@keyframes fadeInOut {
50% {opacity: 1}
100% {opacity: 0}
}
<div class="step3"><span>Hello</span></div>