My goal is to have 4 colorful squares whose opacity goes from 0 to 1 intermittently to show something is loading.
I used css animation property (see below) to achieve that - but it doesn't work!
CSS
animation: opacity 1.5s infinite 200ms
I have implemented it on codepen. Can someone tell me how to fix it?
This is because you have no keyframe animation assigned to you "opacity" animation. You need to create a keyframe animation for this to work:
(I changed the animation name to "fade" instead of "opacity")
CSS
.loader-block:nth-child(1) {
background: red;
animation: fade 1.5s infinite 100ms;
}
...
#-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fade {
from {opacity: 1;}
to {opacity: 0;}
}
CodePen
PS: You also should close out all of your CSS properties with a semicolon (;). I noticed there were a few missing.
You didn't have an animation called 'opacity' so there was no animation being called. In terms of a best practice -- you probably shouldn't have an animation have a name that's also a css property so I renamed it to blink.
Here is a codepen: http://codepen.io/anon/pen/ALEEGQ
#keyframes blink{
from {opacity: 1;}
to {opacity: 0; }
}
.loader-block:nth-child(1) {
background: red;
animation: blink 1.5s infinite 100ms;
}
...
Related
I'm trying to get some text to slide from the left to the center of the webpage using HTML and CSS animations. The goal is to have the first block of text slide into the center first, then after a 2 second delay, have the second block of text slide into the center. So that there will be a nice effect of the reader watching lines as they are written on the page.
Here is the HTML code:
/* .slide1 {
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
} */
.slide2 {
/* animation-delay: 2s; */
margin-top : -20px;
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#-moz-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
<h1 class="slide1">You want to go to the moon.<br></h1>
<h1 class="slide2">We’re here to give you a shot.</h1>
So the trouble is, the animation is working for the second line, but not for the first line when you uncomment the class slide1 above.
The entire thing moves together, which is not what is supposed to happen. The point of having a delay for the animation in slide2 is meant so that after the first block of text finishes moving into the center, then the second block of text will start to move right.
It's confusing why this isn't working -
if you have any solutions to this, please share them!
you must first position your .slide1 and .slide2 off-screen
transform : translateX(-100vw);
...and contrary to what you imagine, the css commands must also respect an order and your delay command must be placed second after the global command of your translate
⛐ 😵 very very bad :
animation-delay : 2s;
animation : 2s slideIn forwards;
( it make animation-delay : 0; )
😁 😁 good :
animation : 2s slideIn forwards;
animation-delay : 2s;
.
otherwise you must respect the correct ordering of the arguments
animation : 2s 2s slideIn forwards;
but in my opinion the best way to write this - without repeating css:
.slide {
text-align : center;
transform : translateX(-100vw);
animation : 2s slideIn forwards;
}
.second {
margin-top : -.8em;
animation-delay : 2s;
}
#keyframes slideIn {
0% { transform : translateX(-100vw); }
100% { transform : translateX(0); }
}
<h1 class="slide">You want to go to the moon.</h1>
<h1 class="slide second">We’re here to give you a shot.</h1>
also note the use of units, and the correct way to center your text whatever the width of the display (as you indicate in your question)
I want to do this effect (jsFiddle, when hover on button):
This is a part of the code i need i guess, what i want is:
every two seconds on a div with this button as the background-image:
i want the shining effect like in the fiddle, that will swoop in and out fast, after two seconds, another swoop, etc...
is it possible with css only?
if no, with javascript, what should be the case for me to do it?
Should i do an interval of:
setInterval(function(){
document.getElementById('btnDiv').classList.add('shining');
setTimeout(function(){
document.getElementById('btnDiv').classList.remove('shining');
,1000)
,2000)
I know it's a bit overkill for this kind of effects, isn't it?
Since you already have the effect you want on :hover, just convert it to an animation.
#element {
animation: pulse 1s linear infinite alternate;
}
#keyframes pulse {
from {
/* define initial state of animation here */
}
to {
/* define final state of animation here */
}
}
Using linear infinite alternate will make the pulse go back and forth between the two states. Depending on the effect you want to achieve, you may have better results by using something like 40% and 60% instead of from and to respectively, to add a bit of delay around the pulse.
#nodelay, #delay {
width: 100px;
height: 100px;
background-color: #080;
border-radius: 50px;
}
#nodelay {
animation: pulse 2s linear infinite alternate;
}
#delay {
animation: pulse-delay 2s linear infinite alternate;
}
#keyframes pulse {
from {background-color: #080}
to {background-color: #0f0}
}
#keyframes pulse-delay {
from, 40% {background-color: #080}
60%, to {background-color: #0f0}
}
<div id="nodelay"></div>
<div id="delay"></div>
I'd like to delay some clouds from starting on http://therealrohanm.me/Falcon-Hacks-Website/, neither animate delay nor transition delay seem to work. How would I accomplish this?
View the code here: https://github.com/Meeshbhoombah/meeshbhoombah.github.io
Check This Fiddle: http://jsfiddle.net/0cmonc5q/
#animated-cloud-background .cloud.cloud-1 {
top: 10%;
-webkit-animation: animateCloud 10s linear infinite;
-moz-animation: animateCloud 10s linear infinite;
animation: animateCloud 10s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
z-index: -5;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
#animated-cloud-background .cloud {
position: absolute;
top: 0;
left: -128px;
}
The animation delay is working, but it needs to be placed after the animations for your style.. Problem with this is that it also delays the first frame, So it appears on the screen until the delay has happened. I've fixed this by giving the cloud elements a -left position.. in this case 128 the width of the image.
And this fiddle: http://jsfiddle.net/0cmonc5q/1/
Shows each image having a different delay (1 to 5 seconds), i've given them all the same animation time/rate so they all move but shows the delay in effect.
I'm trying to highlight a div that wraps a contact form so the user knows where to go to contact. my link will be something like this
Contact Us
Going with a class since this will be used on the site in two places.
right now the current background for #form is #f5f5f5 so what I want to do is Flash a random color like #ff0000 and slowly fade it out back to #f5f5f5
demo on dabblet.com
Target pseudo-class applied to element which you are scrolled to.
Add this to your css:
CSS:
#form {
background-color: #f5f5f5;
}
#form {
background-color: #f5f5f5;
}
#form:target {
animation: target-fade 1s 1;
}
#keyframes target-fade {
0% { background-color: #ff0000; }
100% { background-color: #f5f5f5; }
}
HTML markup:
link to target #form
<form id="form">
…
</form>
PS:
Accordingly to caniuse.com CSS properties: animation and keyframes is needed vendor prefixes such this:
.box_animation:hover {
-webkit-animation: myanim 1s infinite; /* value is demo only */
-moz-animation: myanim 1s infinite;
-o-animation: myanim 1s infinite;
animation: myanim 1s infinite;
}
#-webkit-keyframes myanim {…}
#-moz-keyframes myanim {…}
#-o-keyframes myanim {…}
#keyframes myanim {…}
PPS: dabblet using prefix free JS library to paste all necessary prefixes. Later without this library you can see all you need prefix syntax on css3please
You can use the Ariel Flesler's ScrollTo jQuery Plugin to scroll with animation.
And for changing color with animation you use the jQuery Color Animation Plugin
example
$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});
Edits
If you want to fade it back you can use toggle function.
$('selector').scrollTo( '520px', 800 )
.toggle(function() {
$(this).animate({
{backgroundColor:'#ff0000'}, {duration:5000,queue:false});
},
function() {
$(this).animate({
{backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
});
I'm trying to create a graceful transition between the images within my photo gallery without using ":hover" or an once of Javascript. (I'm still open minded to HTML5)
The animation, this slideshow, should begin on page load, no user interaction needed. However my CSS isn't properly timed. Ideally, every 6 seconds, the current image begins to fade out just as the next image begins to fade in. The animation should loop infinitely after the last image.
I'm using a delay between the images in an attempt to stagger the animations, but the images overlap each other far too much. I seem to have misunderstood a number of things. My Css is below:
#imgContainer {
height: 205px;
position: relative;
width: 300px;
}
#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
-moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
-moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
-moz-animation-delay: 12s;
}
#-moz-keyframes FadeInOut {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I'm really new to css3, so any kind of assistance would be greatly appreciated.
Success!
I discovered if I apply an animation to each of my images within the slideshow, rather than being delayed, I could achieve the effect I desired. Basically the animations would run sequentially in an infinite loop, and rather than use a single keyframe, each has their own.
I wanted the slideshow to progress at 15s intervals. So to accomplish this I set the duration of the entire animation to 45s. The keyframes gradually adjust the opacity of the images based on the current time or frame within the animation. This is indicated by the "%." For example, from 2% to 32% of 45s, the keyframe for the first image will be 100% opaque. Between 32% and 34%, the first image will begin the transition from being opaque to completely transparent.
The difference between (34% of 45s) - (32% of 45s) equals the length of time to complete the transition. Increase this difference for a longer transition.
The keyframe for the second image does the same only its' transition doesn't begin until it reaches 33% of the 45s animation. (I chose to overlap them slightly for visual appeal). Again, I use the difference between 33% and 35% to keep the transition time short, rather than 0% and 35% which would've produced a much longer transition.
The third keyframe follows the same scheme for its image.
As you implement this, don't forget to change / add the appropriate vendor prefix for your browser and browser of your web audience.
/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */
I hope this is helpful to anyone else who may be trying to do the same. If you like what you've read, please feel free to let me know as you vote using the up-arrow.
Thanks.
=)
#imgContainer img{
position:absolute;
left:0;
}
#image0 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}
#-moz-keyframes myKeyFrameName0 {
0% {opacity: 0;}
2% {opacity: 1;}
32% {opacity: 1;}
34% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameNamee1 {
0% {opacity: 0;}
33% {opacity: 0;}
35% {opacity: 1;}
65% {opacity: 1;}
67% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameName2 {
0% {opacity: 0;}
66% {opacity: 0;}
68% {opacity: 1;}
98% {opacity: 1;}
100% {opacity: 0;}
}