This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 2 years ago.
Having this html/css snippet:
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
I want to make it run infinitely and tried to do it like this:
animation-duration: 4s infinite;
It doesn't work, the animation is not working anymore even thought this is what is recommended to do on w3schools.
Any ideas?
I remove animation-name: example; animation-duration: 4s; and add this animation: example 5s infinite; it will fix your problem.
another solution it just to add this without removing anything :
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: example 5s infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
<div class="triangle-four"></div>
On the link provided, it says that the animation property is a shorthand for multiple animation properties.
You have to specify the animation-name and the animation-duration. You may then add the animation-iteration-count.
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: 4s example infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
just add
animation-iteration-count: infinite;
it will solve the issue
Adding the following css should fix it:
animation-duration: 4s;
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
Of course, the end of the animation "jumps" to red, but that is the effect described by your animation. If that was not intended, you can simply add this css:
animation-direction: alternate;
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
here is my attempt to have overlay animation effect but overlay is not hiding after getting out of the underlying div- 'overflowTest'
#overflowTest {
background: #ff0000;
color: white;
padding: 15px;
width: 150px;
height: 100px;
overflow: hidden;
text-shadow: 6px 6px 5px black;
}
#box{
position: absolute;
width: 60px;
height: 60px;
border: 5px solid black;
animation-name: go;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
transform: rotate(45deg);
}
#keyframes go {
0%{
border: 3px solid red;
}
100%{
border: 3px solid red;
transform: translateX(200px);
}
}
<div id="overflowTest"><div id="box"></div><div id="hel">This is demo text to test overlay animation on it</div></div>
please help in hiding the overlay when it is outside the 'overflowTest' div
You need to add position: relative; to the parent #overflowTest.
An Element with position: absolute; will behave absolute to the first parent with a relative position. If no other is declared as relative, it will behave absolute to the page itself, which was happening before.
#overflowTest {
position: relative;
background: #ff0000;
color: white;
padding: 15px;
width: 150px;
height: 100px;
overflow: hidden;
text-shadow: 6px 6px 5px black;
}
#box{
position: absolute;
width: 60px;
height: 60px;
border: 5px solid black;
animation-name: go;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
transform: rotate(45deg);
}
#keyframes go {
0%{
border: 3px solid #ffaaaa;
}
100%{
border: 3px solid #ffaaaa;
transform: translateX(200px);
}
}
<div id="overflowTest">
<div id="box"></div>
<div id="hel">This is demo text to test overlay animation on it</div>
</div>
Hope that is what you are looking for!
The property you should use is z-index.
Setting z-index:-1; will help you get the desired result. z-index works only when position property is also added.
Try this,
#overflowTest {
background: #ff0000;
color: white;
padding: 15px;
width: 150px;
height: 100px;
overflow: hidden;
text-shadow: 6px 6px 5px black;
}
#box{
position: absolute;
width: 60px;
height: 60px;
border: 5px solid black;
animation-name: go;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
transform: rotate(45deg);
z-index:-1;
}
#keyframes go {
0%{
border: 3px solid red;
}
100%{
border: 3px solid red;
transform: translateX(200px);
}
}
<div id="overflowTest"><div id="box"></div><div id="hel">This is demo text to test overlay animation on it</div></div>
Hope it helps.!! Happy Coding!!
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'm trying to make this div move smoothly while changing colors, but the problem is that right before it should transition into the #bad455 color, it stops briefly.
So I was wondering are there any ways to make it go smoothly without no stopping?
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 20px;
}
100% {
background-color: #bad455;
margin-top: 30px;
}
}
<div></div>
You set the iteration count to infinite so your animation keeps going and set the margin of your last keyframe back to 0 so it returns to it's default state.
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 30px;
}
100% {
background-color: #bad455;
margin-top: 0px;
}
}
<div></div>
Try this in your div tag:
-webkit-transition: width 2s;
transition: width 2s;
I have a problem with CSS that I am trying to solve and at this point I need your help.
I have a #keyframes animation that changes the width of a class which have overflow hidden.
The animation has 9 frames and it is working perfectly at this point.
//the working code
h1.imgholder { // This is the object that will animate.
overflow: hidden;
height: 90px;
width: 415px;
margin-left: 46%;
-webkit-animation-name: example; // animation name
-webkit-animation-duration: 3.5s; //animation duration
animation-name: example; // animation name
animation-duration: 3.5s; //animation duration
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
Now what I want is that at some frames to add another animation property like border-right: solid #000;
Like at frame 1, 3, 5, 7, 9 = no border, frame 2, 4, 6, 8 = border-right: solid #000;
//code here for example "tried this, didn't work"
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
What am I doing wrong? How can I make this class that it will show border on specific frames, and remove or "hide" them on other frames.
Any help is appreciated, thanks for your time and sorry for my bad english :p.
I can't quite figure out why it works this way but the animation seems to work well only when you set the border-right on the parent element. As you can see in the below snippet, once that is done the rest of your code works fine.
Also, based on your statement remove or "hide" them on other frames, you may want to consider adding a border-right: none in the other frames because once a property is added in one frame it doesn't go away unless removed. I have added both versions in the snippet for the difference to be visible.
h1.imgholder {
overflow: hidden;
height: 90px;
width: 415px;
-webkit-animation-name: example;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
}
}
/* Just for demo */
h1.imgholder#two{
-webkit-animation-name: example2;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example2;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
#-webkit-keyframes example2 {
0% {
width: 85px;
border-right: none;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
border-right: none;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
border-right: none;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
border-right: none;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
border-right: none;
}
}
<h1 class="imgholder">
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>
<!-- Just for demo -->
<h1 class="imgholder" id ='two'>
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>
I have a link that i want to animate his border from 1px to 5px on click and in the end of the animation i want the 1px to stay, i am using animation-fill-mode with backwards but i see that the 1px border does not apply after the animation is finish.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
/* Styles go here */
body {
margin: 100px;
}
a {
border: 1px solid transparent;
display: inline-block;
padding: 20px;
}
.border-g {
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
In this instance, you have to define the final state in your CSS first.
Then define the new start point in your animation
body {
margin: 100px;
}
a {
border: 1px solid #D74C43;
/* end like this */
display: inline-block;
padding: 20px;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
/* starts like this */
}
to {
border: 5px solid #D74C43;
/* animation ends then switches to final state */
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
EDIT
To solve your updated question...the default states would need to be applied to the border-g class.
Otherwise the answer remains as previously.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
body {
margin: 100px;
}
a {
display: inline-block;
padding: 20px;
}
a.border-g {
border: 1px solid #D74C43;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
From what I read on w3.org, in case of animation-fill-mode: backwards, the properties defined in the keyframe (from or to) will only apply to animation-delay period:
4.9. The animation-fill-mode property
backwards
During the period defined by animation-delay, the animation
will apply the property values defined in the keyframe that will start
the first iteration of the animation. These are either the values of
the from keyframe (when animation-direction is normal or alternate) or
those of the to keyframe (when animation-direction is reverse or
alternate-reverse).