I want to add animated footer to my project. It has animation which goes from right to left and then disapears, and it is in the loop. I want it to stop when it is hovered but since there are 2 animation, I want both of them stop when .Footer class is hovered. So html:
<footer class="Footer">
<ul class="Footer-items">
<li class="Footer-item"><a target="_blank" href="https://twitter.com/JeremBoo" class="Footer-link">
<span class="Footer-icon fa fa-twitter"></span>
</a>
</li>
<!--<li class="Footer-item"><a target="_blank" href="" class="Footer-link">
<span class="Footer-icon fa fa-google-plus"></span>
</a>
</li>-->
<li class="Footer-item"><a target="_blank" href="https://github.com/Jeremboo" class="Footer-link">
<span class="Footer-icon fa fa-github"></span>
</a>
</li>
<li class="Footer-item"><a target="_blank" href="https://codepen.io/Jeremboo/" class="Footer-link">
<span class="Footer-icon fa fa-codepen"></span>
</a>
</li>
<li class="Footer-item"><a target="_blank" href="https://fr.linkedin.com/in/j%C3%A9r%C3%A9mie-boulay-9b005a51" class="Footer-link">
<span class="Footer-icon fa fa-linkedin"></span>
</a>
</li>
<li class="Footer-item"><a target="_blank" href="mailto:jeremi.boulay@gmail.com" class="Footer-link">
<span class="Footer-icon fa fa-envelope"></span>
</a>
</li>
</ul>
</footer>
And this is the css:
/* INIT */
$logoSize : 50px;
$wrapperWidth : $logoSize*6;
$animationDuration : 3000ms;
html, body, ul {
margin : 0;
padding : 0;
}
html, body{
position:relative;
width:100%;
height:100%;
background: #fff;
overflow : hidden;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
ul {
list-style-type: none;
}
a {
text-decoration : none;
}
.f {
font-size: 0.8em;
position: fixed;
top: 5px;
right: 10px;
color : #070707;
}
.f a {
color : #FFC6C6;
}
/* FOOTER */
.Footer {
position : absolute;
top : 50%;
right : 5%;
transform:translateY( -50% );
}
.Footer::before {
content : '';
position : absolute;
bottom : 25%;
right : 0;
width : $wrapperWidth;
height : 25%;
background-color : #FFC6C6;
animation : translate1 $animationDuration infinite;
}
.Footer-items {
width : $wrapperWidth;
float : right;
}
.Footer-item {
display : inline-block;
width : $logoSize;
height : $logoSize;
text-align: center;
}
.Footer-link {
position : relative;
display: block;
width : 100%;
height : 100%;
opacity : 0;
animation : translate2 $animationDuration infinite;
}
.Footer-item:nth-child(2) .Footer-link {
animation-delay : ($animationDuration/50);
}
.Footer-item:nth-child(3) .Footer-link {
animation-delay : ($animationDuration/50)*2;
}
.Footer-item:nth-child(4) .Footer-link {
animation-delay : ($animationDuration/50)*3;
}
.Footer-item:nth-child(5) .Footer-link {
animation-delay : ($animationDuration/50)*4;
}
.Footer-icon {
color : #070707;
position: absolute;
left : 50%;
top : 50%;
font-size : 1.6em;
transform : translate( -50%, -50% );
transition : 0.3s;
}
.fa-codepen, .fa-linkedin, .fa-envelope {
font-size : 1.4em;
}
.fa-linkedin {
font-size : 1.5em;
}
.fa-envelope {
font-size : 1.3em;
}
.Footer-link:hover {
.Footer-icon {
top : 30%;
}
/*.fa-twitter {
color : #3498db;
}
.fa-google-plus {
color : #E34429;
}
.fa-github {
color : #9C7A5B;
}
.fa-linkedin {
color : #34495e;
}
.fa-codepen {
color : #161616;
}*/
}
@keyframes translate1{
0% { opacity : 0; margin-right : -7%; }
20% { opacity : 1; margin-right : 0; }
65% { opacity : 1; margin-right : 0; }
85% { opacity : 0; margin-right : 10%; }
100% { opacity : 0; margin-right : 10%; }
}
@keyframes translate2{
2% { opacity : 0; margin-left : 175%; }
21% { opacity : 1; margin-left : 0%; }
64% { opacity : 1; margin-left : 0%; }
80% { opacity : 0; margin-left : -250%; }
100% { opacity : 0; margin-left : -250%; }
}
So what I am trying to achieve when it is hovered to .Footer, I want to set animation to unset but I don't know how to do that.
Thanks
