hover Animation nicht abbrechen lassen?

...komplette Frage anzeigen

2 Antworten

Das ist garnicht mal so schwer :).

http://jsfiddle.net/u7vXT/349/

Einfach noch animation-iteration-count auf infinite setzen.

Js nicht vergessen.(JQuery).

Hoffe ich konnte dir helfen :)

.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);
}


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

0

Was möchtest Du wissen?