<div class="inf-drive-visionary-transformation">
<div class="inf-drive-visionary-transformation-grid"> <div class="inf-drive-boat-grid">
<div class="inf-drive-boat">
<img alt="" src="dev.netbramha.in/projects/js-files/img/inf-drive-visionary-boat.svg">
</div>
<div class="inf-drive-boat">
<img alt="" src="dev.netbramha.in/projects/js-files/img/inf-drive-visionary-boat.svg">
</div>
<div class="inf-drive-boat">
<img alt="" src="dev.netbramha.in/projects/js-files/img/inf-drive-visionary-boat.svg">
</div>
</div>
<div class="inf-drive-plane-grid">
<div class="inf-drive-plane">
<img alt="" src="dev.netbramha.in/projects/js-files/img/inf-drive-visionary-plane.svg">
</div>
<div class="inf-drive-plane">
<img alt="" src="dev.netbramha.in/projects/js-files/img/inf-drive-visionary-plane.svg">
</div>
</div>
</div>
</div>
.inf-drive-visionary-transformation {
opacity: 1 !important;
-webkit-animation: transformation-div 22s linear;
animation: transformation-div 22s linear;
@include transition(all 1.5s);
}
.inf-drive-boat {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch1 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch1 2.5s infinite;
}
.inf-drive-boat:nth-child(2) {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch2 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch1 2.5s infinite;
}
.inf-drive-boat:nth-child(3) {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch3 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch1 2.5s infinite;
}
.inf-drive-plane {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-plane 19s linear, glitch1 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-plane 19s linear, glitch1 2.5s infinite;
}
.inf-drive-plane:nth-child(2) {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch2 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch2 2.5s infinite;
}
.inf-drive-plane:nth-child(3) {
-webkit-animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch3 2.5s infinite;
animation: boat-movement 3s ease-in-out infinite, transformation-boat 19s linear, glitch3 2.5s infinite;
}
/* Glitch effect */
.inf-drive-boat-grid {
.inf-drive-boat {
text-align: center;
color: #fff;
font-size: 5em;
letter-spacing: 8px;
font-family: 'Press Start 2P';
font-weight: 400;
/*Create overlap*/
margin: 0;
line-height: 0;
/*Animation*/
animation: boat-movement 3s ease-in-out infinite, glitch1 2.5s infinite;
}
.inf-drive-boat:nth-child(2) {
color: #67f3da;
animation: boat-movement 3s ease-in-out infinite, glitch2 2.5s infinite;
}
.inf-drive-boat:nth-child(3) {
color: #f16f6f;
animation: boat-movement 3s ease-in-out infinite, glitch3 2.5s infinite;
}
}
.inf-drive-plane-grid {
.inf-drive-plane {
/*Create overlap*/
margin: 0;
line-height: 0;
/*Animation*/
}
}
/*Keyframes*/
@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
}
7% {
transform: skew(-0.5deg, -0.9deg);
opacity: 0.75;
}
10% {
transform: none;
opacity: 1;
}
27% {
transform: none;
opacity: 1;
}
30% {
transform: skew(0.8deg, -0.1deg);
opacity: 0.75;
}
35% {
transform: none;
opacity: 1;
}
52% {
transform: none;
opacity: 1;
}
55% {
transform: skew(-1deg, 0.2deg);
opacity: 0.75;
}
50% {
transform: none;
opacity: 1;
}
72% {
transform: none;
opacity: 1;
}
75% {
transform: skew(0.4deg, 1deg);
opacity: 0.75;
}
80% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(-2px, -3px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(-5px, -2px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(-5px, -1px);
opacity: 0.5;
}
50% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(-2px, -6px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
@keyframes glitch3 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(2px, 3px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(5px, 2px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(5px, 1px);
opacity: 0.5;
}
50% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(2px, 6px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
@keyframes transformation-boat {
0% {
opacity: 1;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes transformation-boat {
0% {
opacity: 1;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes transformation-plane {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
40% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes transformation-plane {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
40% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes transformation-div {
0% {
left: 10%;
}
50% {
left: 30%;
}
}
@keyframes transformation-div {
0% {
left: 10%;
}
50% {
left: 30%;
}
}
Ребята, здесь я делаю анимацию.Что я хочу, так это то, что мне нужно перемещать лодку слева направо с эффектом плавания по морю, и когда она достигнет определенного положения, лодка превратится в вертолет с эффектом сбоя.Эффект глюка нужно показывать только тогда, когда происходит преобразование изображения.Я пытался сделать это все, но из-за некоторых проблем что-то не работает.Можете ли вы проверить код и, пожалуйста, помогите мне?Спасибо:))