Skip to content

Instantly share code, notes, and snippets.

@carolina-vallejo
Last active May 19, 2016 17:10
Show Gist options
  • Save carolina-vallejo/1cd6798c32e150cf90a738ac6396db8f to your computer and use it in GitHub Desktop.
Save carolina-vallejo/1cd6798c32e150cf90a738ac6396db8f to your computer and use it in GitHub Desktop.
stop animation at last frame
@mixin rotating($tg) {
-webkit-transform: rotate(#{$tg}deg);
-ms-transform: rotate(#{$tg}deg);
transform: rotate(#{$tg}deg);
}
div {
width: 100px;
height: 100px;
position: absolute;
opacity: 1;
animation: volar 5s cubic-bezier(0, 0, 0.41, 0.97) 1 forwards 0.5s;
}
@keyframes volar {
0% {
@include rotating(22);
top: -150px;
}
33% {
@include rotating(2);
}
66% {
@include rotating(22);
opacity: 1;
}
100% {
@include rotating(12);
top: 400px;
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment