I have the following HMTL and CSS:
.parent{
height: 10%;
width: 100%;
float: left;
}
.content1{
height: 100%;
width: 20%;
background-color: blue;
float: left;
}
.content2{
height: 100%;
width: 20%;
background-color: red;
float: left;
}
.content3{
height: 100%;
width: 20%;
background-color:yellow;
float: left;
}
.content4{
height: 100%;
width: 20%;
background-color: green;
float: left;
}
.content5{
height: 100%;
width: 20%;
background-color: orange;
float: left;
}
.parent {
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes animation_01 {
0% {
opacity: 0
}
20% {
opacity: 1
}
40% {
opacity: 0
}
60% {
opacity: 1
}
80% {
opacity: 0
}
100% {
opacity: 1
}
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
This code itself works fine.
You can also find it in the JSfiddle here.
My target now is to display content1 to content5 one after another. Therefore, I wanted to use the opacity function within the animation of the CSS. However, I could not yet figure out how I can use opacity for an individual content because right now the animation only runs for all five contents combined.
Do you know if its is possible to get this animation working within #keyframes or do I need javascript/jQuery like in the example here?
You need to animate each div. You can use the same animation for all. For each div set animation-delay. Here is an example with the animation you defined in the question:
.parent {
height: 10%;
width: 100%;
float: left;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.content1 {
height: 100%;
width: 20%;
background-color: blue;
float: left;
}
.content2 {
height: 100%;
width: 20%;
background-color: red;
float: left;
animation-delay: 1s;
}
.content3 {
height: 100%;
width: 20%;
background-color: yellow;
float: left;
animation-delay: 2s;
}
.content4 {
height: 100%;
width: 20%;
background-color: green;
float: left;
animation-delay: 3s;
}
.content5 {
height: 100%;
width: 20%;
background-color: orange;
float: left;
animation-delay: 4s;
}
.parent {}
#keyframes animation_01 {
0% {
opacity: 0
}
20% {
opacity: 1
}
40% {
opacity: 0
}
60% {
opacity: 1
}
80% {
opacity: 0
}
100% {
opacity: 1
}
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
or if you want each item to be shown for only 1 second for example:
.parent {
height: 10%;
width: 100%;
float: left;
}
.parent div {
animation-name: animation_01;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.content1 {
height: 100%;
width: 20%;
background-color: blue;
float: left;
}
.content2 {
height: 100%;
width: 20%;
background-color: red;
float: left;
animation-delay: 1s;
}
.content3 {
height: 100%;
width: 20%;
background-color: yellow;
float: left;
animation-delay: 2s;
}
.content4 {
height: 100%;
width: 20%;
background-color: green;
float: left;
animation-delay: 3s;
}
.content5 {
height: 100%;
width: 20%;
background-color: orange;
float: left;
animation-delay: 4s;
}
.parent {}
#keyframes animation_01 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
UPDATE
To show them one on top of another set the parent position:relative and the children with position: absolute
.parent {
height: 10%;
width: 100%;
float: left;
position: relative;
}
.parent div {
animation-name: animation_01;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
.content1 {
height: 100%;
width: 20%;
background-color: blue;
position: absolute;
}
.content2 {
height: 100%;
width: 20%;
background-color: red;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 20%;
background-color: yellow;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 20%;
background-color: green;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 20%;
background-color: orange;
animation-delay: 4s;
}
.parent {}
#keyframes animation_01 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
The idea is to add the animation onto the child element rather than the parent and add a animation-delay to delay the start time of each animation ( this is considerably easier when using sass )
.parent{
height: 10%;
width: 100%;
float: left;
}
.content1{
height: 100%;
width: 20%;
background-color: blue;
float: left;
}
.content2{
height: 100%;
width: 20%;
background-color: red;
float: left;
animation-delay:.4s;
}
.content3{
height: 100%;
width: 20%;
background-color:yellow;
float: left;
animation-delay:.8s;
}
.content4{
height: 100%;
width: 20%;
background-color: green;
float: left;
animation-delay:1.2s;
}
.content5{
height: 100%;
width: 20%;
background-color: orange;
float: left;
animation-delay:1.6s;
}
.parent div{
animation-name: animation_01;
animation-duration:5s;
animation-iteration-count:1;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_01 {
0% {
opacity: 0;
}
100%{
opacity:1;
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
Related
I'm working on an animation with css and html but my animation isn't working.
https://www.abroprojectafbouw.nl/
Here is an example how it should look if its done (you need to scroll down) and here is my code. The black screen is always jumping back. Thank you for Help!
html,
body {
height: 100vh;
}
body {
margin: 0;
width: 100%;
}
.image {
animation: change 0.5s ease-out;
height: 70vw;
}
.img {
background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
background-size: cover;
position: relative;
width: 100%;
height: 70vw;
}
.overlay {
position: absolute;
width: 100%;
height: 70vw;
background-color: #000;
top: 0;
right: 0;
animation: slide 0.5s ease-out;
animation-delay: 0.6s;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes change {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="image">
<div class="img">
<div class="overlay"></div>
</div>
</div>
Add overflow: hidden to .img and forwards to slide animation.
html,
body {
height: 100vh;
}
body {
margin: 0;
width: 100%;
}
.image {
animation: change 0.5s ease-out;
height: 70vw;
}
.img {
background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
background-size: cover;
position: relative;
width: 100%;
height: 70vw;
overflow: hidden;
}
.overlay {
position: absolute;
width: 100%;
height: 70vw;
background-color: #000;
top: 0;
right: 0;
animation: slide 0.5s ease-out forwards;
animation-delay: 0.6s;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes change {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="image">
<div class="img">
<div class="overlay"></div>
</div>
</div>
I am creating a loading logo for splash screen.animation looks exactly like this.so when I tried this code but my logo isn't positioned center as I wanted and also the logo is going down as the device length is increasingit is looking like this.supposed to be like this.i am using ionic4/angular8.
ion-content{
--background:yellow;
}
.tree {
left: 0;
right: 10%;
margin:0 auto;
top:50%;
transform:translateY(-50%);
position: relative;
}
.tree > div {
position: absolute;
height: 100%;
width: 100%;
background: yellow;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-name: hello;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.tree img {
max-width: 100%;
}
#keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
#-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
<ion-content>
<div class="tree">
<div></div>
<img src="logo.svg" />
</div>
<ion-content>
You can use margin: 0 auto
.tree {
margin: 0 auto;
}
You also can use flexbox to solve this (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Playing around with the height which is currently using 80vh (view height) you could determine the position vertically. which is different when using another type of device (screen height)
.tree {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.tree > div {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-name: hello;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.tree img {
max-width: 300px;
}
#keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
#-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
<div class="tree">
<div></div>
<img src="http://www.colourbox.com/preview/4221089-363386-green-vector-tree-nature-symbol.jpg" alt="" />
</div>
Simple center the div
<ion-content>
<center>
<div class="tree">
<div></div>
<img src="logo.svg" />
</div>
</center>
<ion-content>
ion-content{
--background:yellow;
}
.tree {
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;
}
.tree img {
max-width: 100px;
}
#keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
#-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
<ion-content>
<div class="tree">
<div class="loader-img">
<img src="http://www.colourbox.com/preview/4221089-363386-green-vector-tree-nature-symbol.jpg" />
</div>
</div>
<ion-content>
I have the following HTML and CSS code:
.parent{
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 20%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 20%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 20%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 20%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 20%;
background-color: orange;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:2s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_01 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
As you can see in the code I display 5 contents on top of each other by using keyframes animation. I want to run this animation infinite therefore I put animation-iteration-count:infinite;.
However, once the animation reaches content5 it does not go back to content1 and starts all over again. Instead, it only goes back to content4 and then shows/hides content4 and content5 in an infinite loop.
What do I have to change in my code so the animation goes back to content1 and starts the animation all over again?
Define a longer animation.
The animation duration in this example is 5 seconds and the visible time frame is 2 seconds. Each div has a different delay, so when one is being fade out the other starts to fade in.
.parent {
height: 10%;
width: 100%;
float: left;
position: relative;
}
.parent div {
animation-name: animation_01;
animation-duration: 5s;
animation-iteration-count: infinite;
opacity: 0;
}
.content1 {
height: 100%;
width: 20%;
background-color: blue;
position: absolute;
opacity: 1;
}
.content2 {
height: 100%;
width: 20%;
background-color: red;
animation-delay: 1s;
position: absolute;
}
.content3 {
height: 100%;
width: 20%;
background-color: yellow;
animation-delay: 2s;
position: absolute;
}
.content4 {
height: 100%;
width: 20%;
background-color: green;
animation-delay: 3s;
position: absolute;
}
.content5 {
height: 100%;
width: 20%;
background-color: orange;
animation-delay: 4s;
}
.parent {}
#keyframes animation_01 {
20% {
opacity: 1
}
0%, 40% , 100% {
opacity: 0
}
}
}
<div class="parent">
<div class="content1">Here goes content1</div>
<div class="content2">Here goes content2</div>
<div class="content3">Here goes content3</div>
<div class="content4">Here goes content4</div>
<div class="content5">Here goes content5</div>
</div>
i want to display my box2 from behind box1.
i can use position: relative; into .box1.
but, i got another problem when im using that position into my project.
How to display .box2 from behind .box1 without set position: relative; into .box1?
.main {
height: 100%;
}
#box1 {
background: red;
height: 200px;
width: 100px;
z-index: 999;
}
#box2 {
position: relative;
padding-top: 100px;
padding-bottom: 79px;
color: white;
margin-top: -200px;
margin-left: 110px;
background: black;
heigth: 200px;
width: 100px;
z-index: 1;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
<div class="main">
<div id="box1">
</div>
<div id="box2" class="animated slideInLeft">
Some text
</div>
</div>
Change z-index to -1
.main {
height: 100%;
}
#box1 {
background: red;
height: 200px;
width: 100px;
z-index: 999;
}
#box2 {
position: relative;
margin: auto;
color: white;
margin-top: -200px;
margin-left: 110px;
background: black;
height: 200px;
width: 100px;
z-index: -1;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
<div class="main">
<div id="box1">
</div>
<div id="box2" class="animated slideInLeft">
Some text
</div>
</div>
I have created this progress bar and I just can't make it stop at the end. Currently its stopping at 70% and gets cleared. Any ideas? Is there any kind of animation setting to stop it at 100%?
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.bar {
background: #ffcc00;
height: 10px;
width: 0%;
}
.animating {
-webkit-animation: progress 3s ;
}
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
animation-fill-mode: forwards; or -webkit-animation: progress 3s forwards;
Try to use 100% in:
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%; /* edit to 100% */
}
}
A Fancy version
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.wrap div {
background-color: #ffcc00;
height: 10px;
width: 0%;
border-radius: 5px;
animation: loadbar 3s;
-webkit-animation: loadbar 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>