I'm currently developing a css theme for YouTube.com and I'm faced with a particular issue:
An animation I've applied for buttons is set to have the fill mode "forwards" so that it stays at its final frame. However, doing this overwrites any style I apply with the :active rule.
How do I get around this?
#keyframes button_hoverin {
from { background: white; }
to { background: red; }
}
#keyframes button_hoverout {
from { background: red; }
to { background: white; }
}
#button {
animation: button_hoverout 0.5s forwards;
}
#button:hover {
animation: button_hoverin 0.5s forwards;
}
#button:active {
background: blue !important; /* even with "!important" it's overwritten.*/
}
<button id="button">Button sample</button>
You can simply reset the animation-fill-mode in :active:
#keyframes button_hoverin {
from { background: white; }
to { background: red; }
}
#keyframes button_hoverout {
from { background: red; }
to { background: white; }
}
#button {
animation: button_hoverout 0.5s forwards;
}
#button:hover {
animation: button_hoverin 0.5s forwards;
}
#button:active {
background: blue;
animation-fill-mode: none;
}
<button id="button">Button sample</button>
However note that Chrome on macOs doesn't run at all your animation (probably because they have trouble with System Colors. See here for more info).
Related
&:hover {
.line-1,
.line-2,
.line-3 {
background-color: #fff;
}
}
&.active {
.line-1,
.line-2,
.line-3 {
background-color: #fff;
}
.line-1 {
animation: animate-line-1 .7s $cubic-bezier-in forwards;
}
.line-2 {
animation: animate-line-2 .7s $cubic-bezier-in forwards;
}
.line-3 {
animation: animate-line-3 .7s $cubic-bezier-in forwards;
}
}
}
&:hover means "when this element is hovered then style it".
For example:
.button {
background: red;
&:hover {
background: green;
}
}
This means: the default background color of the button is red but when you hover it, the background changes to green.
This code is the equivalent of:
.button {
background: red;
}
.button:hover {
background: green;
}
The code above is written using "SASS", a new way to write CSS. You can found more about it here:
Sass.
I built a css animation and part of it is changing the border color of a div.
I'm using from and to values. The border should blink white and blue but instead of white I get a light blue.
I built a minimal snippet to demonstrate this. Any idea what I'm doing wrong?
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
-webkit-animation: switch-animation 2s steps(2, start) infinite;
animation: switch-animation 2s steps(2, start) infinite;
}
#keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
#-webkit-keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
<html>
<head></head>
<body>
<div class="switch"></div>
</body>
</html>
According to the documenation steps(2,start) will give this timing output:
So you will spend 0 time on the first state, half the time on the 50% (light blue) and half the time on the 100% (blue). You will have a similar logic using end instead of start where you will spend 0 time on the last state. Actually what you are looking for is the frames function but it's actually under draft and using frames(2) you will do exactly what you want:
An easy fix is to change the values of the keyframes to force each color to stay half the animation without using steps
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
animation: switch-animation 2s infinite linear;
}
#keyframes switch-animation {
0%,50% {
border-color: white;
}
50.1%,100% {
border-color: blue;
}
}
<div class="switch"></div>
This should work.
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
-webkit-animation: switch-animation 2s steps(1, start) infinite;
animation: switch-animation 2s steps(1, start) infinite;
}
#keyframes switch-animation {
0%,100% {
border-color: white;
}
50% {
border-color: blue;
}
}
#-webkit-keyframes switch-animation {
0%,100%{
border-color: white;
}
50% {
border-color: blue;
}
}
<html>
<head></head>
<body>
<div class="switch"></div>
</body>
</html>
I am trying to give users a "flash" of color when there is a click event. I can get the color to appear in a pleasing fashion using a transition, however I want the color to disappear after .5s, without removing the "active" class. One requirement though is that I cannot use jQuery animations and this must be done in CSS.
Below is the css I am using currently.
.active{
background-color: yellow;
-webkit-transition: background-color .5s linear;
transition: background-color .5s linear;
}
I tried specifying a second value however I do not think this is valid markup as it does not work.
.active{
background-color: yellow;
-webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
transition: background-color .5s linear, background-color:transparent .5s linear;
}
http://jsbin.com/itivum/1/edit
I think this is what you are looking for. The sample is not exact.
$("#go").click(function() {
$("#box").removeClass("demo");
setTimeout(function() {
$("#box").addClass("demo");
}, 1);
});
.container {position: relative;}
#box {
height: 100px;
width: 100px;
background-color: #777;
position: absolute;
left: 5px;
top: 5px;
opacity: 0;
}
#-webkit-keyframes demo {
0% {
background-color: Yellow;
opacity:1;
}
22% {
background-color: Yellow;
}
77% {
background-color: Red;
}
100% {
background-color: #777;
}
}
.demo {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
<div id="box"></div>
</div>
Hope you will get the solution you are looking for from this.
EDIT :
I have edited your JS Bin.
This will be what you are exactly looking for
http://jsbin.com/imonab/1/edit
I came up with the following based on my own needs. I wanted a flash of color to confirm a user action. The text flashes once when you click on it. It does use jquery to set the class, but not for the animation.
Html:
<span style="background:lightgray" id="id">Click to flash</span>
Js:
$('#id').click(function() {
$('#id').addClass('flash');
setTimeout(function() {
$('#id').removeClass('flash');
}, 500);
});
Css:
.flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
#-webkit-keyframes flash-animation {
from { background: yellow; }
to { background: default; }
}
#keyframes flash-animation {
from { background: yellow; }
to { background: default; }
}
See http://jsfiddle.net/umz8t/3597/
Impressed by Rohith's answer, here is my own JSFiddle demo (with added functionality)
The main part is the CSS (or as I prefer, SCSS):
#-webkit-keyframes quickFlash {
0% {
background-color: yellow;
opacity: 1;
}
100% {
background-color: inherit;
}
}
.quickFlash {
//https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
-webkit-animation-name: quickFlash;
-webkit-animation-duration: 1900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-name: quickFlash;
-moz-animation-duration: 1900ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
}
And I also found it useful to be able to have the class remove itself at the end of the animation (so that I could later add it again if I wanted to see the animations again):
function flashYellow(element) {
element
.addClass("quickFlash")
.on(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function() {
console.log("animationend");
$(this)
.delay(500)// Wait for milliseconds.
.queue(function() {
console.log("end of delay");
$(this)
.removeClass("quickFlash")
.dequeue();
});
}
);
}
Here is a test I created to show my situation
http://jsfiddle.net/2vN2S/
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
#keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
#-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
#-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
#-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
body {
display:inline-block;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
animation:myAnim1 5s steps(2, end);
-moz-animation:myAnim1 5s steps(2, end) infinite;
-webkit-animation:myAnim1 5s steps(2, end) infinite;
}
As you can see, I've set up a stepped animation, and a transition for the body background. What I expected was the transition to create the 0.3 second "smoothness" (easing) between each step of the animation, however, it looks like the animation takes the whole control of the background color.
Is there any way to create something like that in an easy way?
Increasing the number of steps works steps(36,end)
Working fiddle http://jsfiddle.net/DeepakKamat/y2vWp/4/
CSS Transitions trigger if the state of the element changes, e.g. it's :hovered or it gets a new class from JS. Steps of CSS animation aren't changes of state, so they don't trigger transitions. Maybe this explanation was wrong and the problem is that one property can't be animated by different mechanisms in the same time.
If you need smooth transitions between steps, you can use an ordinary linear animation instead of step animation, like this:
#keyframes myAnim1 {
0% {
background-color: #212121;
}
45% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
95% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
(edited JSFiddle example)
I'm trying to make hover effect the element
Here is my code piece and a fiddle
http://jsfiddle.net/Fbk9t/
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
#keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
#-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
#-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
#-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
.firstelement {
display:inline-block;
animation:myAnim1 5s;
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.firstelement:hover {
background-color: #ff0000;}
So simply the animation keeps running no matter how I set my hover. hat is the correct route to solve a situation like this?
Notice the transition also..
You need to stop the animation loop when you :hover your element, so:
.firstelement:hover {
background-color: #ff0000;
animation: none;
-moz-animation: none;
-webkit-animation: none;
}
here is the example http://jsfiddle.net/Fbk9t/1/
I hope it helps you ;)
Change the following code from infinite to 1:
Old version:
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
New version
-moz-animation:myAnim1 5s 1;
-webkit-animation:myAnim1 5s 1;