I want the keyframe "smoothly" to do its thing when the button is hovered over.
It works great, but when the animation restarts, I want it to freeze at the end.
I have looked at some places, but I can't find anything that solves my problem.
My code:
#en {
display: inline-block;
padding: 0.3em 1.2em;
border:0.16em solid rgba(255,255,255,0);
font-weight: 300;
border-radius: 0em;
border-color: #4ef18f;
background-color: #4ef18f;
}
#keyframes smoothly {
from {background-color: #43f18f;}
to {background-color: #bbecd0;}
from {border-radius: 0em;}
to {border-radius: 4em;}
}
#en:hover {
animation-name: smoothly;
animation-duration: 1s;
}
Add animation: smoothly 1s forwards
Older browsers : -webkit-animation: smoothly 1s forwards;
Related
Right now the 'box' immediately stops spinning upon mouse hover. How can this code be modified to have the box spin down gradually to a stop instead of immediately?
I've tried 'ease-in', etc, but obviously that would just cause the animation to iteratively ease in over and over again at each iteration instead of staying at the max speed indefinitely.
div.box{
border: 6px solid black;
background-color: blue;
width: 100px;
height: 100px;
animation: turnright 2s linear 0s infinite normal;
}
div.boxcontainer{
display: flex;
width: 112px;
height: auto;
border: 6px solid red;
animation: turnright 2s linear 0s infinite reverse forwards;
animation-play-state: paused;
&:hover{
animation-play-state: running;
}
}
#keyframes turnright{
0%{
rotate: 0deg;
}
100%{
rotate:360deg;
}
}
<div class='boxcontainer'>
<div class='box'/>
</div>
I've incorporated some ideas from : Smoothly Reverting Animation
I want my button to first fade in then I want the hover effects to take place after the button has faded in.
The code can be found here. What can I do to activate the hover effects after the button has faded in.
here is the HTML code for the button:
discover our tours
and here is the css code:
.btn:link,
.btn:visited{
text-decoration: none;
text-transform: uppercase;
padding: 15px 40px;
display: inline-block;
border-radius: 30px;
opacity: 0;
animation: fadeIn 1s ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.btn:hover{
transform: translateY(-3px);
}
.btn:active{
transform: translateY(-1px);
}
.btn-white{
background-color: red;
color: white;
}
#keyframes fadeIn{
0%{
opacity: 0;
transform: translateY(-30px);
}
100%{
opacity: 1;
transform: translate(0);
}
}
the entire code can also be viewed here https://codepen.io/mohits0631/pen/QWjJJEb
animation-fill-mode: forwards sets your transform function based on the end of your animation which cant be overwritten. thats the reason only translate function isn't working there. During hover function you could manually set the animation-fill-mode to none and then set opacity to 1. Hope this works :)
According to the docs,
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block.
I modified your code to check:
.btn:hover{
transform: translateY(-3px);
color: green;
}
The transform did not work but the color worked, so I did
.btn:hover{
display:block;
transform: translateY(-3px);
color: green;
}
and it worked
I would like to use a single #keyframes rule to animate an element from one state to another and then to get back to the original state when I do an action (with the same animation). I saw that using animation-direction: reverse; is a way to play the animation in reverse. However, when I try to use it, the transitions on my element disappear. If I set a new #keyframes with the reversed state it works fine.
What is the point of animation-direction in this case? I am misunderstanding something?
Is there a way to play an animation in both directions with a single #keyframes rule without loosing the transitions? I can't use transition, I need animation.
Here is a example to play with (hover the squares):
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
It's because you apply the same animation to the element on hover as the animation that is on the default state of the element.
So the element already had that animation with the default direction but then you apply it again with the reverse. But it won't work. I don't really know why this happens. But applying the same animation on an element twice, won't work. So you need 2 different keyframes.
You can use a reverse animation or duplicate the existing one and use it with direction: reverse
Read more here
restart animation
more info here
another article here
If you REALLY want to use just 1 animation this can be solved with javascript by removing and adding an 'animate-me' class . But it still wouldn't be ideal
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade2 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fade2 {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
I am trying to make an animation on a button which change the color and background-color from white to black.
I don't want any fade and so I found that I can use animation-timing-function: step.
However when I use it the animation doesn't reach black, it stops at grey.
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(2, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
from {
background-color: #000;
color: white;
}
to {
color: black;
background-color: #fff;
}
}
<button class="animated-play-btn">
coucou
</button>
Here the demo.
Any one have an idea how to do this (no JS of course)?
This seems to be sort of a "grey" area (pun intended) with respect to the steps() timing function for animations.
What seems to happen is that when you use steps(2, end), the animation is supposed to have two steps - one is from black background + white color to an intermediate state (where both are gray) and then another from the intermediate state to white background + black color (the end state) but the 2nd step happens right at the end of the animation and at almost the same time that the element is going to its original state to start the next loop. So, it kind of creates an impression that the white background + black color never happens.
The solution that seems to be working is to use steps(1, end) with the start and end states as black background + white color while the half way stage is white background + black color. I don't have any conclusive explanation on why this works but the point is that it does work.
This article at designmodo is the only one that I've found about this topic but I am still finding it difficult to explain the reason for this behavior. The one thing which we can be certain about after seeing this example is that if steps(n, start) is used, the car never comes to start position whereas if we use steps(n, end) it never reaches the end point. It is a 4 step animation but only three steps are visible, the other step happens right at the start or the end (depending on the parameter).
Solution:
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(1, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
0%, 100% {
background-color: #000;
color: white;
}
50% {
color: black;
background-color: #fff;
}
}
<button class="animated-play-btn">
coucou
</button>
The solution is to add on step and change:
animation-timing-function: steps(2, end);
by
animation-timing-function: step-end;
Here the new css:
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(1, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
from {
background-color: #000;
color: #fff;
}
50%{
color: #000;
background-color: #fff;
}
to {
background-color: #000;
color: #fff;
}
}
I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle:
http://jsfiddle.net/Garavani/yrnjaf69/2/
<div class= "category_item">
<div class= "cat_button">
<span class="title_cat">TEXT</span>
</div>
</div>
CSS:
.category_item {
position: absolute;
background-color: #999;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
/* seems to be overwriten by animation keyframes */
-webkit-transition: -webkit-transform 0.215s ease-in-out;
transition: transform 0.215s ease-in-out;
cursor: pointer;
}
.category_item:hover {
-webkit-animation-name: easeBack;
animation-name: easeBack;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes easeBack {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
}
.cat_button {
position: absolute;
width: 200px;
height: 55px;
bottom: 0;
border: 2px solid #fff;
color: #fff;
-webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}
.category_item:hover .cat_button {
background: #fff;
border-color: #fff;
color: #511c5b;
}
In this (simplified) animation everything works fine except for when the mouse leaves the entire box. The animation starts from it original state, but abruptly.
The basic transition time (and ease) is ignored because it seems the keyframes have higher importance and overwrite it.
What I need is the keyframe animation triggering AND when the mouse leaves it should turn back to the original state smoothly.
Is there a solution for this
1) in pure CSS
2) maybe with some little javascript only?
Thanks in advance for help and ideas!
EDIT:
After implementing the solution offered kindly by Toni this is the correct fiddle:
http://jsfiddle.net/yrnjaf69/40/
Thanks again Toni!
EDIT 2:
Sadly, yet, there is one question left. The part with the keyframes is not executed on Firefox even though I added all the -moz- vendors, too, in this fiddle:
http://jsfiddle.net/dr6Ld0wL/1/
Why?
PS: As far as I tested for now it works even in Opera (Beta). Only browser resisting is Firefox
EDIT 3:
The correct (working) code is now in this fiddle:
http://jsfiddle.net/dr6Ld0wL/16/
The keyframes also need to be explicitly divided in vendor prefixes. Jesus Christ. Those prefixes…
Here is a jsfiddle that achieves this.
.demo-hover {
position: relative;
margin: 100px;
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
.demo-hover:hover {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
#keyframes complexProcess {
/* keyframes */
}
#keyframes complexProcessReversed {
/* keyframes (opposite) */
}
The animation out is assigned in the css in the main class, then the hover state kicks in on hover and css re-applies the original class properties on unhover.
The animation does trigger backwards on page load, so you might like to think of tweaking your animation to take this into account, like this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example where the animations are triggered by adding and removing classes to the target using jquery:
JavaScript
$('.demo-hover').hover(
function() {
// mouse in
$(this).removeClass('forwards--reversed').addClass('forwards');
},
function() {
// mouse out
$(this).removeClass('forwards').addClass('forwards--reversed');
}
);
CSS
.forwards {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
.forwards--reversed {
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
Also, I'd use #keyframe or transition. Use transition if you just need a simple even change from n to m but when things are more complex, such as one thing changing evenly over 100% but another thing not starting until 50% off the animation has played, then use a #keyframe
Using both will cause confusion, especially if you're trying to animate the same properties.
Finally css vendor prefixes are required