I have this animation in HTML/CSS. The final square in the animation is in green, i'm trying to make it so that each time the green square show up prior to the last time the animation looped. Because in its current state it always shows up at the last square!
HTML:
<div class="loader">
<div class="square" ></div>
<div class="square"></div>
<div class="square last"></div>
<div class="square clear"></div>
<div class="square"></div>
<div class="square last"></div>
<div class="square clear"></div>
<div class="square "></div>
<div class="square last"></div>
</div>
CSS
#-webkit-keyframes enter {
0% {
opacity: 0;
top: -10px;
}
5% {
opacity: 1;
top: 0px;
}
50.9% {
opacity: 1;
top: 0px;
}
55.9% {
opacity: 0;
top: 10px;
}
}
#keyframes enter {
0% {
opacity: 0;
top: -10px;
}
5% {
opacity: 1;
top: 0px;
}
50.9% {
opacity: 1;
top: 0px;
}
55.9% {
opacity: 0;
top: 10px;
}
}
#-moz-keyframes enter {
0% {
opacity: 0;
top: -10px;
}
5% {
opacity: 1;
top: 0px;
}
50.9% {
opacity: 1;
top: 0px;
}
55.9% {
opacity: 0;
top: 10px;
}
}
body {
background: #1fbeca;
}
* {
margin: 0;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27.5px;
margin-top: -27.5px;
}
.square {
background: white;
width: 15px;
height: 15px;
float: left;
top: -10px;
margin-right: 5px;
margin-top: 5px;
position: relative;
opacity: 0;
-webkit-animation: enter 6s infinite;
animation: enter 6s infinite;
}
.enter {
top: 0px;
opacity: 1;
}
.square:nth-child(1) {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.square:nth-child(2) {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.square:nth-child(3) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
background: #fdc96f;
}
.square:nth-child(4) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.square:nth-child(5) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.square:nth-child(6) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.square:nth-child(8) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.square:nth-child(9) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.clear {
clear: both;
}
.last {
margin-right: 0;
}
Here's a link: https://codepen.io/dghez/pen/Czuqn
To have the colored square shift position every time the 'enter' animation is run, create a new animation that is 9 times the length of the 'enter' animation.
The reason for this length is that each of the 9 squares needs to be animated for one full run of the 'enter' animation.
9 squares x 6s = 54s.
For 1/9 of this animation (roughly 11%), we change the square's color.
#keyframes squarecolor {
0%, 11.1% {
background-color: #fdc96f;
}
11.2%, 100% {
background-color: white;
}
}
Then, apply this animation to every square, just like the 'enter' animation. Here though, each square should be progressively delayed in increments of 6s.
Here's a link to an updated version of your Codepen.
You can achieve the affect by using a 2nd animation that changes a square at a time to yellow for one entire loop of the animation.
The 2nd animation loops after the 1st animation has run for all 9 squares (6s * 9 = 54s), and each square is delayed to some interval of 6s to line up with the corresponding loop where it should be yellow.
#-webkit-keyframes enter {
0% {
opacity: 0;
top: -10px;
}
5% {
opacity: 1;
top: 0px;
}
50.9% {
opacity: 1;
top: 0px;
}
55.9% {
opacity: 0;
top: 10px;
}
}
#keyframes enter {
0% {
opacity: 0;
top: -10px;
}
5% {
opacity: 1;
top: 0px;
}
50.9% {
opacity: 1;
top: 0px;
}
55.9% {
opacity: 0;
top: 10px;
}
}
#-webkit-keyframes change {
0% {
background: #fdc96f;
}
11.11% { /* one 6s frame in a 54s animation (6/54 = .1111) */
background: #fdc96f;
}
11.12% {
background: white;
}
100% {
background: white;
}
}
#keyframes change {
0% {
background: #fdc96f;
}
11.11% {
background: #fdc96f;
}
11.12% {
background: white;
}
100% {
background: white;
}
}
body {
background: #1fbeca;
}
* {
margin: 0;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27.5px;
margin-top: -27.5px;
}
.square {
background: white;
width: 15px;
height: 15px;
float: left;
top: -10px;
margin-right: 5px;
margin-top: 5px;
position: relative;
opacity: 0;
}
.enter {
top: 0px;
opacity: 1;
}
.square:nth-child(1) {
-webkit-animation: enter 6s 1.8s infinite, change 54s 12s infinite;
animation: enter 6s 1.8s infinite, change 54s 12s infinite;
}
.square:nth-child(2) {
-webkit-animation: enter 6s 2.1s infinite, change 54s 6s infinite;
animation: enter 6s 2.1s infinite, change 54s 6s infinite;
}
.square:nth-child(3) {
-webkit-animation: enter 6s 2.4s infinite, change 54s infinite;
animation: enter 6s 2.4s infinite, change 54s infinite;
}
.square:nth-child(4) {
-webkit-animation: enter 6s 0.9s infinite, change 54s 30s infinite;
animation: enter 6s 0.9s infinite, change 54s 30s infinite;
}
.square:nth-child(5) {
-webkit-animation: enter 6s 1.2s infinite, change 54s 24s infinite;
animation: enter 6s 1.2s infinite, change 54s 24s infinite;
}
.square:nth-child(6) {
-webkit-animation: enter 6s 1.5s infinite, change 54s 18s infinite;
animation: enter 6s 1.5s infinite, change 54s 18s infinite;
}
.square:nth-child(7) {
-webkit-animation: enter 6s infinite, change 54s 48s infinite;
animation: enter 6s infinite, change 54s 48s infinite;
}
.square:nth-child(8) {
-webkit-animation: enter 6s 0.3s infinite, change 54s 42s infinite;
animation: enter 6s 0.3s infinite, change 54s 42s infinite;
}
.square:nth-child(9) {
-webkit-animation: enter 6s 0.6s infinite, change 54s 36s infinite;
animation: enter 6s 0.6s infinite, change 54s 36s infinite;
}
.clear {
clear: both;
}
.last {
margin-right: 0;
}
<div class="loader">
<div class="square"></div>
<div class="square"></div>
<div class="square last"></div>
<div class="square clear"></div>
<div class="square"></div>
<div class="square last"></div>
<div class="square clear"></div>
<div class="square "></div>
<div class="square last"></div>
</div>
Pen: https://codepen.io/straker/pen/mqdzMw
Related
I have animation:
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 100px;
width: 100px;
background: pink;
opacity: 0;
-webkit-animation: fadein 2s ease-in alternate;
-moz-animation: fadein 2s ease-in alternate;
animation: fadein 2s ease-in alternate;
animation-delay: 2s;
}
<div id="animation1"></div>
I would like to have a hidden element by 2 seconds and show it, but this element disappears after animation. When I remove opacity 0, element is visable earlier than it should. How to do it?
You can use animation-fill-mode: forwards
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 100px;
width: 100px;
background: pink;
opacity: 0;
-webkit-animation: fadein 2s ease-in alternate;
-moz-animation: fadein 2s ease-in alternate;
animation: fadein 2s ease-in alternate;
animation-delay: 2s;
animation-fill-mode: forwards;
}
<div id="animation1"></div>
I have an animation which should rotate 360 degrees 50% into the animation, but it's not working.
.w11 {
top:9px; font-
size:50px; color: black; opacity: 0.5;}
.w11 {animation: movefirst
12s linear infinite;
animation-direction:
alternate-reverse;
position: relative;}
#keyframes movefirst {0%
{left:23px;}50%
{transform:rotateX(3
60deg);}
100%{left:200px;}}
<div class="w11">e</div>
It works, you just had some extra space typos in your code.
.w11 {
position: relative;
top: 9px;
font-size:50px;
opacity: 0.5;
animation: movefirst 12s linear infinite;
animation-direction: alternate-reverse;
}
#keyframes movefirst {
0% {
left: 23px;
}
50% {
transform: rotateX(360deg);
}
100% {
left: 200px;
}
}
<div class="w11">e</div>
I've made a small Image animation where images changes opacity over time.It works smoothly but when last image gets to 100% it jumps straight to 0% without any transition.
I have already tried animation-direction: alternate for third image and delay for all image but it does not work for me. Delay works only first step of animation cycle after it delay becomes 0 for all.
Here is my CSS
.rightside .img-container img.first {
animation-name: first-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-delay: -10s; */
}
.rightside .img-container img.second {
position: absolute;
top: 0;
animation-name: second-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.rightside .img-container img.third {
position: absolute;
top: 0;
animation-name: final-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* animation-direction: alternate; */
}
#keyframes first-image {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes second-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes final-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="img-container">
<img src="Images/Apple.png" class="first turn" alt="Image Here" />
<img src="Images/Bee.png" class="second" alt="Image Here" />
<img src="Images/Cat.png" class="third" alt="Image Here" />
</div>
The clasical aproach to this would be just using different delays:
div {
animation-name: all;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
.first {
animation-delay: -3s;
background-color: lightgreen;
}
.third {
animation-delay: -6s;
background-color: lightblue;
}
#keyframes all {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
I stuck in keyframes animations.
I have a fadein fadeout animation css. Code work nice with 3 div but when I add + 1 div and animations, css loop is broken. I want them to work synchronously but how ?
There is code :
#-webkit-keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#-webkit-keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#-webkit-keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-webkit-keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-moz-keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#-moz-keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#-moz-keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#-moz-keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#keyframes fadeA {
0% {
opacity: 0
}
13.2%,19.8% {
opacity: 1;
z-index: 5
}
100%,33% {
opacity: 0
}
}
#keyframes fadeB {
0%,33% {
opacity: 0
}
46.2%,52.8% {
opacity: 1;
z-index: 5
}
100%,66% {
opacity: 0
}
}
#keyframes fadeC {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
#keyframes fadeD {
0%,66% {
opacity: 0
}
79.2%,85.8% {
opacity: 1;
z-index: 5
}
100% {
opacity: 0
}
}
.anm1{
width:100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeA ease 15s infinite;
-moz-animation: fadeA ease 15s infinite;
animation: fadeA ease 15s infinite
}
.anm2 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeB ease 15s infinite;
-moz-animation: fadeB ease 15s infinite;
animation: fadeB ease 15s infinite
}
.anm3 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeC ease 15s infinite;
-moz-animation: fadeC ease 15s infinite;
animation: fadeC ease 15s infinite
}
.anm4 {
width: 100%;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeD ease 15s infinite;
-moz-animation: fadeD ease 15s infinite;
animation: fadeD ease 15s infinite
}
<div>
<div class="anm1">FIRST TEXT </div>
<div class="anm2">SECOND TEXT</div>
<div class="anm2">THIRD TEXT</div>
<div class="anm2">FOURth TEXT</div>
</div>
You defined class anm2 to last three div's. I think it could be a reason of animation crash along with some grammar mistakes in css-rules.
Here is a solution of animate. Animation used with one keyframe due to different animation-delay for different div-s
#-webkit-keyframes fadeA {
0% {opacity: 0}
12.5% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
#keyframes fadeA {
0% {opacity: 0}
12.5% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0 }
}
[class^="anm"] {
display: inline-block;
position: absolute;
top: 3px;
left: 0;
opacity: 0;
-webkit-animation: fadeA ease 12s;
-moz-animation: fadeA ease 12s ;
animation: fadeA ease 12s ;
}
.anm1{
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.anm2 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.anm3 {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.anm4 {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
<div>
<div class="anm1">FIRST TEXT </div>
<div class="anm2">SECOND TEXT</div>
<div class="anm3">THIRD TEXT</div>
<div class="anm4">FOURth TEXT</div>
</div>
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo