Frage von abbrechen, 46

hover Animation nicht abbrechen lassen?

Hi,

ich möchte gerne, dass meine hover Animation nicht abgebrochen wird, wenn der hover Status verloren geht. Aktuell ist es also so, dass wenn die Animation nicht fertig ist und ich den hover durch Wegziehen des Mauszeigers vorzeitig beende, die Animation abrupt abbricht.

Ich habe mal ein pen vorbereitet, um es zu verdeutlichen: http://codepen.io/anon/pen/QKNwpR

Eine reine css-Lösung wäre natürlich klasse, JavaScript oder bzw. jQuery wären aber auch wunderbar.

Antwort
von Cr33p, 15

.socialmedia {
margin: 0 auto 0 auto;
text-align: center;
ul {
li {
display: inline-block;
.social {
margin: 0 12px 0 0;
width: 50px;
height: 50px;
background-color: deeppink;
}
}
}
}

@mixin rotateY($deg) {
-webkit-transform: rotateY($deg);
-moz-transform: rotateY($deg);
-o-transform: rotateY($deg);
-ms-transform: rotateY($deg);
transform: rotateY($deg);
}


@-webkit-keyframes coin {
0% {
@include rotateY(0deg);
}
30% {
@include rotateY(360*2deg);
}
65% {
@include rotateY(360*2.5deg);
}
100% {
@include rotateY(360*3deg);
}
}

@-moz-keyframes coin {
0% {
@include rotateY(0deg);
}
30% {
@include rotateY(360*2deg);
}
65% {
@include rotateY(360*2.5deg);
}
100% {
@include rotateY(360*3deg);
}
}

@-o-keyframes coin {
0% {
@include rotateY(0deg);
}
30% {
@include rotateY(360*2deg);
}
65% {
@include rotateY(360*2.5deg);
}
100% {
@include rotateY(360*3deg);
}
}

@keyframes coin {
0% {
@include rotateY(0deg);
}
30% {
@include rotateY(360*2deg);
}
65% {
@include rotateY(360*2.5deg);
}
100% {
@include rotateY(360*3deg);
}
}
@keyframes hover {
0% {
@include rotateY(0deg);
}
30% {
@include rotateY(360*2deg);
}
65% {
@include rotateY(360*2.5deg);
}
100% {
@include rotateY(360*3deg);
}
}

@mixin animation-name($name) {
-webkit-animation-name: $name;
-moz-animation-name: $name;
-o-animation-name: $name;
animation-name: $name;
}

@mixin animation-duration($sec) {
-webkit-animation-duration: $sec;
-moz-animation-duration: $sec;
-o-animation-duration: $sec;
animation-duration: $sec;
}

@mixin animation-timing-function($timfunc) {
-webkit-animation-timing-function: $timfunc;
-moz-animation-timing-function: $timfunc;
-o-animation-timing-function: $timfunc;
animation-timing-function: $timfunc;
}

@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
-moz-animation-iteration-count: $count;
-o-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin animation-direction($dir) {
-webkit-animation-direction: $dir;
-moz-animation-direction: $dir;
-o-animation-direction: $dir;
animation-direction: $dir;
}

.socialmedia .social {
@include animation-name(coin);
@include animation-duration(3s);
@include animation-timing-function(ease-out);
}
.socialmedia .social:hover{
@include animation-name(hover);
@include animation-duration(3s);
@include animation-timing-function(ease-out);
}


Kommentar von Cr33p ,

Sorry für den langen Post, ich hatte keine Ahnung wie man speichert, ohne sich bei codepen anzumelden.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten