Короче говоря, моя проблема такова:
Я делаю анимацию на кнопке, когда при наведении курсора на кнопку триггера анимируются отдельные значки, аналогично этому;.button_class:hover ~ .seperate_class{} и мне интересно, как запустить анимацию после того, как элемент больше не находится в состоянии :hover.В моем коде значки вращаются наружу, растут и слегка двигаются, и я хочу анимировать их, чтобы они вернулись на прежнюю позицию, по сути, «отменив» анимацию.
Просто используя обычный :hoverработает плавно, но обрезается до конечного пункта назначения
/*$(document).ready(function() {
var controller = new ScrollMagic.Controller();
var firstScene = new ScrollMagic.Scene({
triggerElement: '#para_cont_1'
})
.setClassToggle('#para_cont_1', 'fade-in')
.addTo(controller);
}); */
$(document).ready(function() {
$('.btn_link_2').mouseenter(function(){
$('.wave1').addClass( "animationone" );
$('.wave1').animate({opacity: '0.8',}, 1000);
$('.wave2').addClass( "animationtwo" );
$('.wave2').animate({opacity: '0.8',}, 1000);
$('.wave3').addClass( "animationthree" );
$('.wave3').animate({opacity: '0.8',}, 1000);
});
$('.btn_link_2').mouseleave(function(){
$('.wave1').removeClass( "animationone" );
$('.wave1').animate({opacity: '0',}, 1000);
$('.wave2').removeClass( "animationtwo" );
$('.wave2').animate({opacity: '0',}, 1000);
$('.wave3').removeClass( "animationthree" );
$('.wave3').animate({opacity: '0',}, 1000);
});
//Coding for Shopping Store Button
/*$('.btn_link_4').mouseenter(function(){
$('.shirt').addClass( "grow_move_1" );
$('.shirt').animate({opacity: '1',}, 1000);
$('.pants').addClass( "grow_move_2" );
$('.pants').animate({opacity: '1',}, 1000);
$('.tie').addClass( "grow_move_3" );
$('.tie').animate({opacity: '1',}, 1000);
$('.dress').addClass( "grow_move_4" );
$('.dress').animate({opacity: '1',}, 1000);
$('.shoe').addClass( "grow_move_5" );
$('.shoe').animate({opacity: '1',}, 1000);
});
$('.btn_link_4').mouseleave(function(){
$('.shirt').addClass( "shrink_move_1" );
$('.shirt').removeClass( "grow_move_1" );
$('.shirt').animate({opacity: '0',}, 1000);
$('.pants').addClass( "shrink_move_2" );
$('.pants').removeClass( "grow_move_2" );
$('.pants').animate({opacity: '0',}, 1000);
$('.tie').addClass( "shrink_move_3" );
$('.tie').removeClass( "grow_move_3" );
$('.tie').animate({opacity: '0',}, 1000);
$('.dress').addClass( "shrink_move_4" );
$('.dress').removeClass( "grow_move_4" );
$('.dress').animate({opacity: '0',}, 1000);
$('.shoe').addClass( "shrink_move_5" );
$('.shoe').removeClass( "grow_move_5" );
$('.shoe').animate({opacity: '0',}, 1000);
});*/
});
body {
background-color: #d3bb9b;
overflow-x: hidden;
color: #2f3033;
}
.main_hd_cont {
max-width: 100vw;
width: 100vw;
max-height: 7vw;
height: 7vw;
background-color: #9fc8eb;
position: absolute;
top: 6vw;
left: 0;
border-top: .5vw solid #183a12;
border-bottom: .5vw solid #183a12;
z-index: 2;
}
.contact {
background-color: #d3bb9b;
width: 100vw;
height: 6vw;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
.home_img {
max-width: 13vw;
width: 13vw;
max-height: 13vw;
height: 13vw;
position: absolute;
left: 45vw;
top: -3vw;
z-index: 3;
}
.home_img_2 {
max-width: 100vw;
width: 100vw;
max-height: 50vw;
height: 50vw;
position: fixed;
left: 0;
top: 0;
filter: blur(.2vw);
background-image: url("../Images/HomeImg.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100vw 50vw;
}
.paratxt {
position: absolute;
top: 25vw;
max-width: 100vw;
width: 100vw;
text-align: center;
font-size: 2vw;
font-family: 'Alegreya SC'Arial, Verdana, Sans-serif;
color: #f1f1f1;
text-shadow: 0 .2vw rgba(0, 0, 0, .6);
}
.btn_link_1, .btn_link_2, .btn_link_3, .btn_link_4{
max-width: 15vw;
width: 15vw;
max-height: 3vw;
height: 3vw;
border: none;
background-color: #86acd7;
position: absolute;
color: #2f3033;
border-radius: 4vw;
font-size: 1.25vw;
font-style: italic;
font-family: Arial, Verdana, Sans-serif;
transition: .5s;
overflow: hidden;
box-shadow: .5vw .5vw .5vw rgba(0 ,0 ,0, .5);
font-weight: bold;
}
.btn_link_1:before {
content: '';
background: linear-gradient(90deg, transparent, #fff, transparent);
position: absolute;
left: -15vw;
top: 0;
max-width: 15vw;
width: 15vw;
max-height: 3vw;
height: 3vw;
transition: .5s;
overflow: hidden;
border-radius: 4vw;
}
.btn_link_2, .btn_link_3, .btn_link_4 {
top: 30vw;
left: 8vw;
overflow: hidden;
z-index: 3;
transition: 2s;
color: #2f3033;
max-width: 17vw;
width: 17vw;
}
.btn_link_4 {max-width: 18vw; width: 18vw;}
.in_front {
position: absolute;
top: .7vw;
left: 2vw;
z-index: 5;
}
.tile1, .tile2, .tile3 {
max-width: 33.5vw;
width: 33.5vw;
max-height: 32vw;
height: 32vw;
position: absolute;
top: 66.5vw;
left: 0vw;
color: #fff;
font-family: 'Alegreya SC', Arial, Verdana, Sans-serif;
text-align: center;
z-index: 3;
font-size: 1.5vw;
}
.tile2 { left: 33.5vw;}
.tile3 { left: 66.6vw;}
.sub_tile_hd_txt, .sub_tile_hd_txt_2 {
font-size: 1.5vw;
max-width: 21vw;
width: 21vw;
position: absolute;
left: 6.5vw;
color: #f1f1f1;
text-shadow: .5vw .5vw .5vw rgba(0, 0, 0, .7);
transition: 1s;
font-family: 'Alegreya', Arial, Verdana, Sans-serif;
}
.hd_txt, .snd_hd_txt {
font-family: 'Cinzel Decorative', cursive;
color: white;
font-size: 2.5vw;
font-weight: bold;
position: absolute;
top: -.5vw;
left: 32.5vw;
text-shadow: .25vw .25vw .25vw rgba(0, 0, 0, .7);
transition: .5s;
}
.snd_hd_txt {
left: 60.5vw;
}
.hd_txt:hover {
text-shadow: .15vw .15vw rgba(0, 0, 0, .7);
}
.hd_txt:hover + .snd_hd_txt{
text-shadow: .15vw .15vw rgba(0, 0, 0, .7);
}
.sep_line_1, .sep_line_2 {
max-width: .5vw;
width: .5vw;
max-height: 34vw;
height: 34vw;
background-color: #86acd7;
position: absolute;
top: 66.5vw;
left: 33vw;
z-index: 3;
transition: .5s;
}
.sep_line_2 {left: 66.5vw;}
.tile1:hover + .sep_line_1 {
max-height: 37vw;
height: 37vw;
top: 65vw;
}
.tile2:hover + .sep_line_2 {
max-height: 37vw;
height: 37vw;
top: 65vw;
}
#para_cont_1, #para_cont_2, #para_cont_3 {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 33vw;
background-position: center;
position: absolute;
max-width: 33.5vw;
width: 33.3vw;
max-height: 35vw;
height: 35vw;
transition: 2s;
filter: blur(.2vw);
overflow: hidden;
padding-bottom: 2vw;
z-index: 2;
}
.circle {
max-width: 14vw;
width: 14vw;
max-height: 14vw;
height: 14vw;
position: absolute;
top: -4vw;
left: 44vw;
background-color: #9fc8eb;
border-radius: 10vw;
z-index: 1;
border: .5vw solid #183a12;
}
.main_nav {
position: absolute;
top: 2vw;
left: 5vw;
}
.main_nav a{
text-decoration: none;
color: #e8e8e8;
padding-right: 1vw;
font-size: 1.75vw;
font-family: 'Alegreya SC', serif;
font-weight: bold;
text-shadow: .15vw .15vw .15vw rgba(0, 0, 0, .7);
transition: .5s;
}
.main_nav_2 {
position: absolute;
top: 2vw;
right: 5vw;
}
.norm_txt {
font-family: 'Alegreya', Arial, Verdana, Sans-serif;
font-size: 1.25vw;
padding-left: 1vw;
}
.fab {
font-size: 2.5vw;
padding-right: 1.75vw;
opacity: .7;
transition: 1s;
}
.sub_hd_txt_1 {
max-width: 100vw;
width: 100vw;
max-height: 6vw;
height: 6vw;
position: absolute;
top: 58vw;
left: 0;
font-family: 'Alegreya SC', Arial, Verdana, Sans-serif;
color: #f1f1f1;
text-align: center;
line-height: 5.5vw;
font-size: 1.75vw;
text-shadow: .25vw .25vw .25vw rgba(0, 0, 0, .7);
background-color: #9fc8eb;
}
.wave1 {
position: absolute;
top: .45vw;
left: -5vw;
width: 30vw;
border-radius: 14.6675vw;
background-color: #593C1F;
height: 34vw;
opacity: 0;
z-index: 2;
}
.wave2 {
position: absolute;
top: .5vw;
left: -3vw;
width: 30vw;
border-radius: 14.6675vw;
background-color: #593C1F;
height: 34vw;
opacity: 0;
z-index: 2;
}
.wave3 {
position: absolute;
top: .7vw;
left: -9vw;
width: 30vw;
border-radius: 14.6675vw;
background-color: #593C1F;
height: 33vw;
opacity: 0;
z-index: 2;
}
/* Icons8 Logos, grow, shrink, basic format, & animations start here (Shop Btn) */
.shirt, .pants, .dress, .shoe, .tie {
filter: invert(1);
width: 1.5vw;
position: absolute;
z-index: 4;
top: 30.5vw;
opacity: 0;
transition: opacity .5s;
}
.btn_link_4:hover ~ .shirt {
transform: rotate(-45deg);
transition: 1s;
opacity: 1;
left: 6vw;
top: 28vw;
max-width: 2.5vw;
width: 2.5vw;
}
.btn_link_4:hover ~ .shirt:after {
transform: rotate(45deg);
transition: 1s;
opacity: 1;
left: 6vw;
top: 28vw;
max-width: 2.5vw;
width: 2.5vw;
}
.shirt {left: 9vw;}
.pants {left: 12vw;}
.dress {left: 15vw;}
.shoe {left: 18vw;}
.tie {left: 21vw;}
.grow_move_1 {animation: grow1 .5s linear 1; animation-fill-mode: forwards;}
.grow_move_2 {animation: grow2 .5s linear 1; animation-fill-mode: forwards;}
.grow_move_3 {animation: grow3 .5s linear 1; animation-fill-mode: forwards;}
.grow_move_4 {animation: grow4 .5s linear 1; animation-fill-mode: forwards;}
.grow_move_5 {animation: grow5 .5s linear 1; animation-fill-mode: forwards;}
.shrink_move_1 {animation: shrink1 .5s linear 1; animation-fill-mode: forwards;}
.shrink_move_2 {animation: shrink2 .5s linear 1; animation-fill-mode: forwards;}
.shrink_move_3 {animation: shrink3 .5s linear 1; animation-fill-mode: forwards;}
.shrink_move_4 {animation: shrink4 .5s linear 1; animation-fill-mode: forwards;}
.shrink_move_5 {animation: shrink5 .5s linear 1; animation-fill-mode: forwards;}
/* Animation, Grow and move outward from btn: Shop Btn */
@keyframes grow1 {100% {max-width: 2.5vw; width: 2.5vw; top: 28vw; left: 6vw; transform: rotate(-45deg);}}
@keyframes grow2 {100% {max-width: 2.5vw; width: 2.5vw; top: 28vw; left: 26vw; transform: rotate(45deg);}}
@keyframes grow3 {100% {max-width: 2.5vw; width: 2.5vw; top: 33vw; left: 6vw; transform: rotate(-45deg);}}
@keyframes grow4 {100% {max-width: 2.5vw; width: 2.5vw; top: 33vw; left: 25vw; transform: rotate(135deg);}}
@keyframes grow5 {100% {max-width: 2.5vw; width: 2.5vw; top: 26.5vw; left: 15vw;}}
/* Animation, Shrink & move behind btn: Shop Btn */
@keyframes shrink1 {0% {max-width: 2.5vw; width: 2.5vw; top: 28vw; left: 6vw; transform: rotate(-45deg);} 100% {max-width: 1.5vw; width: 1.5vw; top: 30.5vw; left: 8vw; transform: rotate(45deg);}}
@keyframes shrink2 {0% {max-width: 2.5vw; width: 2.5vw; top: 28vw; left: 26vw; transform: rotate(45deg);} 100% {max-width: 1.5vw; width: 1.5vw; top: 30.5vw; left: 12vw; transform: rotate(-45deg);}}
@keyframes shrink3 {0% {max-width: 2.5vw; width: 2.5vw; top: 33vw; left: 6vw; transform: rotate(-45deg);} 100% {max-width: 1.5vw; width: 1.5vw; top: 30.5vw; left: 15vw; transform: rotate(45deg);}}
@keyframes shrink4 {0% {max-width: 2.5vw; width: 2.5vw; top: 33vw; left: 25vw; transform: rotate(135deg);} 100% {max-width: 1.5vw; width: 1.5vw; top: 30.5vw; left: 18vw; transform: rotate(-135deg);}}
@keyframes shrink5 {0% {max-width: 2.5vw; width: 2.5vw; top: 26.5vw; left: 15vw;} 100% {max-width: 1.5vw; width: 1.5vw; top: 30.5vw; left: 21vw; opacity: 0;}}
/* Media Queries for mobile */
@media only screen and (max-width: 740px) {
.home_img_2 {background-attachment: scroll; background-size: cover;}
.wave1 {animation: wave1 5s linear infinite; opacity: .8;}
.wave2 {animation: wave2 9s linear infinite; opacity: .8;}
.wave3 {animation: wave3 6s linear infinite; opacity: .8;}
.main_nav {font-size: 7vw; width: 50vw; top: 0vw;}
.main_hd_cont {max-height: 12vw; height: 12vw;}
.home_img {max-width: 18vw; width: 18vw; max-height: 18vw; height: 18vw;}
.circle {max-width: 19.5vw; width: 19.5vw; max-height: 20vw; height: 20vw; align-items: center; display: flex;}
.fas {font-size: 2vw;}
}
/* Condensed 1-2 Lines Code Snippets */
.animationone {animation: wave1 5s linear infinite;}
.animationtwo {animation: wave2 7s linear infinite;}
.animationthree {animation: wave3 6s linear infinite;}
@keyframes wave1 {100% {transform: rotate(360deg);}}
@keyframes wave2 {100% {transform: rotate(360deg);}}
@keyframes wave3 {100% {transform: rotate(360deg);}}
.btn_link_1:hover:before {left: 15vw; border-radius: 4vw;}
.btn_link_1:hover {box-shadow: .15vw .15vw rgba(0, 0, 0, .5);}
.btn_link_2:hover {cursor: pointer;}
.main_nav a:hover {text-shadow: .1vw .1vw rgba(0, 0, 0, .7);}
.fas {font-size: 1.5vw; color: #2f3033;}
.fa-phone, .fa-fax, .fa-envelope, .fa-map-marker-alt {position: absolute; top: 2vw;}
.fa-phone {left: 10vw;}
.fa-fax {left: 28vw;}
.fa-envelope {left: 62vw;}
.fa-map-marker-alt {left: 82vw;}
.fab:hover {opacity: 1;}
.fa-youtube {color: #ff0000;}
.fa-twitter {color: #38A1F3;}
.fa-facebook-f {color: #3b5998;}
.fa-coffee, .fa-music, .fa-tshirt {color: #fff; font-size: 2vw;}
#para_cont_1 {top: 65vw; left: 0;}
#para_cont_2 {top: 65vw; left: 33.3vw;}
#para_cont_3 {top: 65vw; left: 66.6vw;}
.btn_link_1 {top: 30vw; left: 44vw;}
<!DOCTYPE HTML>
<html>
<head>
<title>Heron Hosting | Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"/>
<link href="https://fonts.googleapis.com/css?family=Alegreya+SC:400,500,700,800|Alegreya:400,700|Cinzel+Decorative:400,700,900" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"/>
<link rel="shortcut icon" href="../Images/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="../Images/favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../JavaScript/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale= 1.0"/>
</head>
<body>
<section class="contact">
<i class="fas fa-phone"><span class="norm_txt">+1 (678)-737-6307</span></i>
<i class="fas fa-fax"><span class="norm_txt">+1 (555)-444-3333</span></i>
<i class="fas fa-envelope"><span class="norm_txt">jordanndunton@gmail.com</span></i>
<i class="fas fa-map-marker-alt"><span class="norm_txt">37 Snapper Ln SE</span></i>
</section>
<section class="main_hd_cont">
<header class="main_hd">
<a href="index.html"><img src="../Images/OfficialHomeLogo.png" alt="Company Logo" class="home_img"/></a>
<div class="circle"></div>
<a href="index.html"><h1 class="hd_txt">Heron</h1> <h1 class="snd_hd_txt">Hosting</h1></a>
<nav class="main_nav">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Themes</a>
</nav>
<nav class="main_nav_2">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
</nav>
</header>
</section>
<section class="body_cont">
<div class="home_img_2"> </div>
<h1 class="paratxt">Shop Hundreds of High Quality Templates</h1>
<button type="button" onclick="window.location.href='#'" class="btn_link_1">Shop Now </button>
<h1 class="sub_hd_txt_1"> Featured Themes </h1>
</div>
<div id="para_cont_1" class="big_tile_1">
<img src="../Images/CoffeeShopImg.jpg" alt="Coffee Shop Tile"/>
</div>
<div class="tile1">
<i class="fas fa-coffee"></i>
<h1 class="tile_1_txt">Starting a Coffee Shop?</h1>
<h2 class="sub_tile_hd_txt">We've got several templates that are just what you are looking for your coffee shop start-up. With smooth UI, elegant fonts, and simple, yet effective color palates for any atmosphere you might have</h2>
<button type="button" class="btn_link_2"><span class="in_front">Browse Coffee Themes</span><div class="wave1"></div><div class="wave2"></div><div class="wave3"></div></button>
</div>
<div class="sep_line_1"></div>
<div class="tile2">
<i class="fas fa-music"></i>
<h1 class="tile_2_txt">Selling Instruments?</h1>
<h2 class="sub_tile_hd_txt_2">With several site concepts, feel free to browse for the theme that best suits the goals of your store. Utilize different designs to captivate your buyers, and make secure payments with your customizable shop page.</h2>
<button type="button" class="btn_link_3">Browse Music Themes</button>
</div>
<div class="sep_line_2"></div>
<div class="tile3">
<i class="fas fa-tshirt"></i>
<h1 class="tile_2_txt">Selling Clothes, Need a Site?</h1>
<h2 class="sub_tile_hd_txt_2">Shop several different themes to best support your fashion line or upcoming chain. With smooth layouts, many templates offer a slick and modern feel for shopping. Sell T-shirts and shorts, or sell High Quality Dress clothes with a website to match.</h2>
<button type="button" class="btn_link_4">Browse Clothing Themes</button>
<img src="../Images/pants.png" alt="P" class="pants"/>
<img src="../Images/shirt.png" alt="S" class="shirt"/>
<img src="../Images/bowtie.png" alt="T" class="tie"/>
<img src="../Images/shoe.png" alt="S" class="shoe"/>
<img src="../Images/dress.png" alt="D" class="dress"/>
</div>
<div id="para_cont_2" class="big_tile_2">
<img src="../Images/MusicStoreImg.jpg" alt="Music Store Tile"/>
</div>
<div id="para_cont_3" class="big_tile_3">
<img src="../Images/ClothingStoreImg.jpg" alt="Shopping Store Tile"/>
</div>
Кто-нибудь знает, как этого добиться без JS, я бы предпочел CSS, если это возможно?
Пожалуйста, просмотрите фрагментв полноэкранном режиме, чтобы анимация работала лучше.