Keep animation playing until it finished on unhover in CSS - css

So i have this block of code that makes an animation:
.c:hover{
animation: rotate 1s ease;
}
#keyframes rotate {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
Basically i want the animation to keep playing even after unhover until it ends
Can anyone help?

Related

How can i do animations to show item CSS

am looking for a solution to make some animations on an item when we try to load the next one.
Here is what i have:
Before i click i have this :
After Click:
I want to show the image in background when i click on the list element at the right side (Man, Woman...).
The backgroud image is hidden on the right, it exceeds the screen and this one is resized.
I need to hide the backgroundimage without resizing the screen, and show it when click with animation.
CSS:
img.slider__bg {
width: 100%;
position: absolute;
transform: translateX(100%);
-webkit-transform: translateX(100%);
transition: transform .5s 4s;
&.showBg {
animation: showBg 0.5s forwards;
-webkit-animation: showBg 0.5s forwards;
}
&.hideBg {
animation: hideBg 0.5s forwards;
-webkit-animation: hideBg 0.5s forwards;
}
#keyframes showBg {
100% { transform: translateX(0%); }
}
#-webkit-keyframes showBg {
100% { -webkit-transform: translateX(0%); }
}
#keyframes hideBg {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
#-webkit-keyframes hideBg {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100%); }
}
}
Use conditional rendering to display the background image when you click. You need to declare a state to identify whether you clicked or not.

Finish animation on hover even mouse leave

I'm using CSS keyframes to rotate an element on its hover state.
How do I make the element finish its animation even the mouse leave the element before it actually end?
For example, if I move my mouse out of the element(stop hovering) while the element only rotating to 180 degree (the full animation is 360 degree), it immediately stop the animation and go back to its original state instead of finish the animation.
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
#rotate:hover {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div id="rotate"></div>
You need to use Javascript for this, the following snippet is shown using some jQuery, a working example:
$("#rotate").on({
mouseenter() {
$(this).addClass("animated");
},
animationend() {
$(this).removeClass("animated");
},
});
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
.animated {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotate"></div>
Make sure that the class animated is with the animation, and #rotate is the box you want to spin.
This worked for my situation as it pauses and starts from where it left off. For simple rotation, this feels nicer than the jump you usually get from hovering in and out.
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.name-star {
right: 5px;
top: 15px;
animation: 5s rotate infinite;
animation-play-state: paused;
animation-timing-function: ease-in;
}
.mat-grid-tile:hover .name-star {
animation-play-state: running;
}

Hiding scroll bar during animations the CSS way

I have some animations which I use for the purpose of transition. Although the transition is cool, it brings up the horizontal and vertical scrollbars which is pretty ugly.
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
#keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Is there any where to define to the browser using CSS that no scrollbar must be displayed during these animations, or in other words, Overflow = Hidden WHEN Animating.

Combining CSS transition and animations together?

Hello I am having trouble combining both css transition and animations together. The animation is working but some reason when I add a transition, the transition works, but cancels out the animation. Anyone know how to combine them?
Here is my CSS:
.circle-spin {
transition: all 1s ease;
}
.circle-spin-reverse {
transition: all 1s ease;
}
.success li:hover .circle-spin-reverse {
animation:spin-reverse 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
.success li:hover .circle-spin {
animation:spin 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }
Sorry I know it's alot of code, but thats the bare minimum code needed for this question.
Thanks
It’s cause your transform
/* in :hover */
transform:scale(1.25);
overrides transform in animaton
/* in animation */
transform:rotate(360deg);
You have to separate transforms to different elements. See my codepen.

CSS subsequent transitions with graphic/codepen

I'm trying to animate two images to a center point and then rotate them concurrently. I'm not sure how to transform the svgs before the animation begins. See the following model.
I need to do a transform: rotate(90deg) before the animation begins (on :hover). I can't seem to get the transform to take effect before the animation. See the following codepen:
See my codepen: http://codepen.io/himmel/pen/dPzVmg
instead of delaying the animation
.svg-container-burger {
-webkit-animation: rotateClockwise 1s linear;
-webkit-animation-delay: 1s;
}
and trying to rotate the objects before the animation, just extend the animation to the pause prior to it, and set the rotation in it
.svg-container-mouth {
-webkit-animation: rotateClockwise 2s linear;
}
#-webkit-keyframes rotateClockwise {
0% {
-webkit-transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
codepen

Resources