&: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.
Related
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).
Like a progress bar:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
}
span:nth-child(1) {
animation: bar 1s linear;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
I'd like the next <span> to blink for a second and then the third one and so on. Is it possible with CSS?
Use the following CSS:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
}
span:nth-child(1){
animation: bar 1s linear 0s forwards;
}
span:nth-child(2){
animation: bar 1s linear 1s forwards;
}
span:nth-child(3){
animation: bar 1s linear 2s forwards;
}
span:nth-child(4){
animation: bar 1s linear 3s forwards;
}
span:nth-child(5){
animation: bar 1s linear 4s forwards;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
With CSS you can just declare static code, so if you know exactly how many spans will be used there is no problem. If you want something recursive (first then the next one, until there are spans) you can do that only with JS.
Note that in this example I know precisely how many child the p has.
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
animation: bar 5s linear infinite;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
span:nth-child(4) {
animation-delay: 3s;
}
span:nth-child(5) {
animation-delay: 4s;
}
#keyframes bar {
0% {
color: black;
background: white;
}
10% {
color: white;
background: black;
}
11% {
color: black;
background: white;
}
100% {
color: black;
background: white;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
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;