I am building an transition with :after css and content in it using below code and Its working fine on chrome but not working on firefox 26.0. Why ?
Where i did wrong? I could not understand it ?
Help me out
<html>
<head>
<style type="text/css">
.teacherheading {
display: inline-block;
font-size:20px;
}
.teacherheading::after{content:'educational';
animation: 8s ease-out 2s pulsate;
animation-iteration-count: infinite;
-webkit-animation: 8s ease-out 2s pulsate;
-webkit-animation-iteration-count: infinite;
-moz-animation: 8s ease-out 2s pulsate;
-moz-animation-iteration-count: infinite;
-o-animation: 8s ease-out 2s pulsate;
-o-animation-iteration-count: infinite;
}
#-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-webkit-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-moz-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-o-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
</style>
<body>
<div style="font-size:20px">
Start your <div class="teacherheading"></div> institution
</div>
</body>
</html>
The content property is not meant to be animatable.
Chrome seems to allow this (I do not know why) but Firefox is somewhat stricter.
Basically FF is following the intended behaviour, Chrome is not.
Content # MDN
From Chris Coyier at CSS-Tricks
In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.
It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.
If you need to change content in a cross-browser friendly way
Use JavaScript.
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 wanna make an animation that runs for infinity times but does not return to its orginal state when it completed a run. Think it like a sun moving animation. Here is a sample project
.animator3{
-webkit-animation-name:j3;
-webkit-animation-delay:0s;
-webkit-animation-direction:alternate;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-fill-mode: forwards;
transform:translateX();
}
#-webkit-keyframes j3{
0% {transform: rotate(30deg)}
100% {transform: rotate(150deg)}
}
<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>
It gets back to its original state once it finished each run. I dont want it. Can anyone help me to solve this?
If you want it to run infinite times, you must set a final state that will match with the initial one.
Plus, you indicated "alternate" as animation method, so it means it would go from A to B and then from B to A and repeat.
Default option will go from A to B and then restart from A to B.
I also added -webkit-animation-timing-function: linear; to have an animation without the acceleration and slow-down effect.
<style>
.animator3 {
-webkit-animation-name:j3;
-webkit-animation-delay:0s;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
transform:translateX();
}
#-webkit-keyframes j3{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
</style>
<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>
Hope it helps
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
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 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;}
}