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>
Related
Basically what the title says. I am trying to get this div to appear about 4s after page load, but it is instead appearing straight away. It is doing the fade animation (which lasts 2 seconds) but this animation is beginning straight away.
Here is the HTML:
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
animation-delay: 5s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
Any help at all on this would be great. I have googled it for hours but can't seem to work out why it is not working.
p.s I am using this on Chrome.
As you're using prefixes for different browsers and they are after the original animation, browsers will use their prefixed animation (e.g. browsers using -webkit will expect -webkit-animation-delay).
You could add animation-duration with all separate prefixes or just use animation-delay in animation all together:
#aboutone {
text-align: center;
margin-top: 10px;
z-index: 0;
opacity: 0;
/* animation: duration timing-function delay name */
animation: 2s ease 5s fadeIn;
-webkit-animation: 2s ease 5s fadeIn;
-moz-animation: 2s ease 5s fadeIn;
-o-animation: 2s ease 5s fadeIn;
-ms-animation: 2s ease 5s fadeIn;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
If you want the animation to start (with delay) after the whole body is loaded and not right when user loads the page, you can use onload event listener on the body (As this answer to your question says)
You can use dom call back with a function in Javascript to wait until the document is loaded, then add the style to the element.
(function() {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
As Vepthy suggested in comments... you could also add an event listener for the load. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
window.addEventListener('load', (event) => {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
I have the following CSS classes, and HTML code that implement a timed display:
.timedSuccessBox {
color: white;
background: #27ae60;
border-radius: 5px;
padding: 5px;
-moz-animation: inAndOut 5s ease-in forwards;
-webkit-animation: inAndOut 5s ease-in forwards;
animation: inAndOut 5s ease-in forwards;
}
#keyframes inAndOut {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class='timedSuccessBox'>That worked!</div>
Is it possible to continue only using CSS (no JS) and pass the duration of animation, currently hard coded to 5?
Ideally what I want is, if the invoking HTML code passes a duration, that will be used, else fallback to 5s.
Thanks.
You could override a custom property which is set to 5s by default
:root {
--duration: 5s;
}
.timedSuccessBox {
color: white;
background: #27ae60;
border-radius: 5px;
padding: 5px;
-moz-animation: inAndOut var(--duration) ease-in forwards;
-webkit-animation: inAndOut var(--duration) ease-in forwards;
animation: inAndOut var(--duration) ease-in forwards;
}
#keyframes inAndOut {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class='timedSuccessBox' style='--duration: 10s'>That worked!</div>
I think you could use that in html:
<div class='timedSuccessBox' style='animation-duration: 10s!important'>That worked!</div>
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
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've been working on cross-fading between three different images for a "twinkling" effect, but discovered I actually need to do this with three different divs so I can use the "background-repeat" property. The problem is I can't seem to figure out how to modify the code to work with divs instead of images.
Here's the code I've been using that works with images:
CSS:
#-webkit-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#-moz-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#starrysky img {
position: top left fixed;
width:900px;
}
#starrysky img:nth-child(2) {
opacity: .9;
-webkit-animation: twinkle 1.25s ease-in alternate infinite;
-moz-animation: twinkle 1.25s ease-in alternate infinite;
animation: twinkle 1.25s ease-in alternate infinite;
transition-delay: 2s;
}
#starrysky img:nth-child(3) {
opacity: .9;
-webkit-animation: twinkle 1.75s ease-in alternate infinite;
-moz-animation: twinkle 1.75s ease-in alternate infinite;
animation: twinkle 1.75s ease-in alternate infinite;
transition-delay: 3s;
}
#starrysky img:nth-child(4) {
opacity: .7;
-webkit-animation: twinkle 2.5s ease-in alternate infinite;
-moz-animation: twinkle 2.5s ease-in alternate infinite;
animation: twinkle 2.5s ease-in alternate infinite;
transition-delay: 2s;
}
and HTML:
<div id="starrysky">
<img src="arcticnomoon1.jpg;">
<img src="arcticnomoon2.jpg">
<img src="arcticnomoon3.jpg">
</div>
Any help would be much appreciated! I'm hoping to be able to do this without jQuery, or if I must, very simple jQuery. :\
Well you are on the right track, you're just positioning the images in the #starrysky div a bit wrong :)
Here's an example
#-webkit-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#-moz-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#starrysky {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
#starrysky img {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#starrysky img{
opacity: .9;
-webkit-animation: twinkle 1.25s ease-in alternate infinite;
-moz-animation: twinkle 1.25s ease-in alternate infinite;
animation: twinkle 1.25s ease-in alternate infinite;
transition-delay: 2s;
}
#starrysky img:nth-child(2) {
opacity: .9;
-webkit-animation: twinkle 1.75s ease-in alternate infinite;
-moz-animation: twinkle 1.75s ease-in alternate infinite;
animation: twinkle 1.75s ease-in alternate infinite;
transition-delay: 3s;
}
<div id="starrysky">
<img src="http://www.southernhillsanimalhospital.com/sites/site-1450/images/kittens.jpg" />
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" />
</div>