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>
Related
Can someone please review the following block of code and tell me why the animation on the image div and info div are not working.
this is the html file for the about page. (i had enclosed the block content in a div and given it position relative)
{%extends 'layout.html' %}
{%block content %}
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
Try adding:
#image { position:absolute; }
If you are using Firefox, open the dev tools, locate the div image, and see the styles info.
You will see something like this
Notice that left is grayed. Now, hover on the "i" circle. You will see a message stating "left has no effect because the element is not positioned".
So, this is your problem
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
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 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>
This question already has answers here:
css3 transition animation on load?
(13 answers)
Closed 5 years ago.
so when the page first opens it is fully occupied by the first div, i then want it to shrink into four equal divs of different colours automatically.
i have been trying to crack this for a while, here's my code so far:
div {
float: left;
}
#div1 {
width: 100%;
height: 100%;
background: #f24c43;
animation-name: shrink;
animation-duration: 4s;
}
#div2 {
width: 0%;
height: 0%;
background: #ffe605;
animation-name: grow;
animation-duration: 4s;
}
#div3 {
width: 0%;
height: 0%;
background: #e89b30;
animation-name: grow;
animation-duration: 4s;
}
#div4 {
width: 0%;
height: 0%;
background: #870e40;
animation-name: grow;
animation-duration: 4s;
}
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
You can add a container around your div elements and use "display: flex;" on it in order to have the items align properly and shrink/grow to your "%" based width/heights.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
/*animations*/
#keyframes shrink {
from {
width: 100%;
height: 100%;
}
to {
width: 50%;
height: 50%;
}
}
#keyframes grow {
from {
width: 0%;
height: 0%;
}
to {
width: 50%;
height: 50%;
}
}
/*css*/
#flex {
display: flex;
height: 100%;
width: 100%;
}
#div1 {
width: 100%;
height: 100%;
background: #f24c43;
animation-name: shrink;
animation-duration: 4s;
}
#div2 {
width: 0%;
height: 0%;
background: #ffe605;
animation-name: grow;
animation-duration: 4s;
}
#div3 {
width: 0%;
height: 0%;
background: #e89b30;
animation-name: grow;
animation-duration: 4s;
}
#div4 {
width: 0%;
height: 0%;
background: #870e40;
animation-name: grow;
animation-duration: 4s;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/home.css">
<title>GymBro2</title>
</head>
<body>
<div id="flex">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</div>
</body>
</html>
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.
This is my css
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: relative;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
And my html
<div class="loader">
<div class="bar"></div>
</div>
And a jsfiddle with the code
Can someone tell me what I'm doing wrong?
It is because you have a heavy break between 49% and 50%.
49% {
width: 100%;
}
50% {
left: 100%;
}
Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
Snippet
body {margin: 0; padding: 0;}
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
width: 0;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/
If you need a pulsating effect, you need to use two extremes:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Snippet
body {margin: 0; padding: 0; overflow: hidden;}
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
width: 100%;
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
I have slightly changed your code, managed to make it work. Here's what I've changed:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Added overflow: hidden; to .loader
Added width: 100%; to .loader .bar
http://jsfiddle.net/wbyzy9jL/5/