html - 以延迟开始的反向垂直动画
问题描述
我需要创建动画类型“轮盘赌”。我找到了我需要的东西,但我想改变旋转方向。现在旋转是从下到上。我想扭转它。我添加了属性动画方向:反向;在类 .carousel__item 中,它可以工作。唯一的问题是一开始的延迟很大,特别是如果我在滑块中有更多项目。如何消除延迟?
https://codepen.io/aija/pen/xvXWoK
.carousel__item {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
animation: carousel-animate-vertical $animation-timing linear infinite;
animation-direction: reverse;
}
解决方案
除了animation-direction: reverse;
您必须更换才能对您的物品造成负面延迟
@for $i from 1 through ($carousel-items - 1) {
.carousel__item:nth-child(#{$i}) {
animation-delay: calc(-#{$animation-delay-fraction} * #{$i - 1});
}
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Work Sans", sans-serif;
font-weight: 400;
height: 100vh;
}
.wrapper {
background: linear-gradient(60deg, #420285, #08BDBD);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.carousel {
position: relative;
width: 100%;
max-width: 500px;
display: flex;
justify-content: center;
flex-direction: column;
}
.carousel__item {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
-webkit-animation: carousel-animate-vertical 27s linear infinite;
animation: carousel-animate-vertical 27s linear infinite;
}
.carousel__item:nth-child(1) {
-webkit-animation-delay: calc(-3s * 0);
animation-delay: calc(-3s * 0);
}
.carousel__item:nth-child(2) {
-webkit-animation-delay: calc(-3s * 1);
animation-delay: calc(-3s * 1);
}
.carousel__item:nth-child(3) {
-webkit-animation-delay: calc(-3s * 2);
animation-delay: calc(-3s * 2);
}
.carousel__item:nth-child(4) {
-webkit-animation-delay: calc(-3s * 3);
animation-delay: calc(-3s * 3);
}
.carousel__item:nth-child(5) {
-webkit-animation-delay: calc(-3s * 4);
animation-delay: calc(-3s * 4);
}
.carousel__item:nth-child(6) {
-webkit-animation-delay: calc(-3s * 5);
animation-delay: calc(-3s * 5);
}
.carousel__item:nth-child(7) {
-webkit-animation-delay: calc(-3s * 6);
animation-delay: calc(-3s * 6);
}
.carousel__item:nth-child(8) {
-webkit-animation-delay: calc(-3s * 7);
animation-delay: calc(-3s * 7);
}
.carousel__item:last-child {
-webkit-animation-delay: calc(-3s * 2);
animation-delay: calc(-3s * 2);
}
.carousel__item-head {
border-radius: 50%;
background-color: #d7f7fc;
width: 90px;
height: 90px;
padding: 14px;
position: relative;
margin-right: -45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.carousel__item-body {
width: 100%;
background-color: #fff;
border-radius: 8px;
padding: 16px 20px 16px 70px;
}
.title {
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
}
@-webkit-keyframes carousel-animate-vertical {
0% {
transform: translateY(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%, 11.1111111111% {
transform: translateY(100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
14.1111111111%, 22.2222222222% {
transform: translateY(0) scale(1);
opacity: 1;
visibility: visible;
}
25.2222222222%, 33.3333333333% {
transform: translateY(-100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
36.3333333333% {
transform: translateY(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
transform: translateY(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}
@keyframes carousel-animate-vertical {
0% {
transform: translateY(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%, 11.1111111111% {
transform: translateY(100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
14.1111111111%, 22.2222222222% {
transform: translateY(0) scale(1);
opacity: 1;
visibility: visible;
}
25.2222222222%, 33.3333333333% {
transform: translateY(-100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
36.3333333333% {
transform: translateY(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
transform: translateY(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}
.carousel__item {
animation-direction: reverse;
}
<div class='wrapper'>
<div class='carousel'>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>spouting whale</p>
<p>Unicode: U+1F433</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>whale</p>
<p>Unicode: U+1F40B</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>dolphin</p>
<p>Unicode: U+1F42C</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>fish</p>
<p>Unicode: U+1F41F</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>tropical fish</p>
<p>Unicode: U+1F420</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>blowfish</p>
<p>Unicode: U+1F421</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>shark</p>
<p>Unicode: U+1F988</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>octopus</p>
<p>Unicode: U+1F419</p>
</div>
</div>
<div class='carousel__item'>
<div class='carousel__item-head'>
</div>
<div class='carousel__item-body'>
<p class='title'>spiral shell</p>
<p>Unicode: U+1F41A</p>
</div>
</div>
</div>
</div>
推荐阅读
- python - 对卷积层形状的计算感到困惑
- ios - CocoaPods 未正确安装
- javascript - Vue 通过 props 和 "this" 回调
- hadoop - 加入 Hive Yarn aplication_id 和 Ranger 日志审计
- excel - 将命名范围设置为整数
- elasticsearch - Hibernate Search:Elasticsearch 和 Lucene 产生不同的搜索结果
- flutter - 工具提示 onTap 而不是 onLongPress 可能吗?
- php - 如何创建嵌套模型的验证以在 Laravel 中调用请求
- angular - 如何在Angular的子组件中使用来自父组件的TemplateRef时更新更改数据
- swift - 谷歌地图 GMSCameraUpdate 缩放在 swift 5 中最小化