I would like to design my CSS file in this way:
<h1 class="bounce">Bouncing Text</h1>
<h1 class="bounce fast">Faster Bouncing Text</h1>
I have CSS code that looks like this, but it doesn't seem to be working:
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
-webkit-animation-name: bounce-animation;
animation-name: bounce-animation;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
The 'fast' class does not seem to actually change the animation-duration at all. The two elements bounce at the same speed.
Is there anyway to make this design work? Thanks
Try this
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
position: relative;
-webkit-animation: bounce-animation 5s infinite;
animation: bounce-animation 5s infinite;
-webkit-animation-duration: 2s;
}
#-webkit-keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
#keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
http://jsfiddle.net/x8326n81/3/
I realized that I was applying the animation to the ::after pseudo element. In order to see the results, I needed to adjust my fast CSS:
.fast,
.fast::after {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
display: block; will fix the problem. :)
Related
This question already has answers here:
css "left" not working
(5 answers)
Closed last year.
It's probably something really simple and i'm just being stupid. The button won't show the animation. When I run the code, there is no error showing.
HTML:
<button id='testBtn' class='test'>Test</button>
CSS:
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Check whether those styles work on the element before making an animation
#keyframes changePos {
0% {
margin-left: 0px;
}
50% {
margin-left: 1000px;
}
100% {
margin-left: 0px;
}
}
Add animation like this:
animation: changePos 5s infinite;
.test {
width: 100px;
height: 100px;
position: relative;
animation: changePos 3s infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Set position: relative;
You can also use animation in short like animation: changePos 4s linear 0s infinite alternate;
#keyframes changePos {
0% {left: 0px;}
50% {left: 400px;}
100% {left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
position: relative;
/*animation: changePos 4s linear 0s infinite alternate;*/
}
<button id='testBtn' class='test'>Test</button>
I can't seem to find my mistake can you please help me?
I have put the -webkit- prefixes, also all elements are Valid
here's the code:
div {
width:200px;
height:200px;
background-color:red;
-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>
I expected it to move but I don't know what my mistake is in the code
You need add position :relative; to your css
div {
width:200px;
height:200px;
background-color:red;
position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div>
hi
</div>
</body>
First of all the webkit prefix will only apply to chromium based browsers. Second in order for top to apply you need to specifiy a position like absolute or relative:
div {
width:200px;
height:200px;
background-color:red;
position: absolute;
-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-name: easter;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay:1s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>
Additional information to the answer of #Hien Nguyen, I would suggest you to use the following syntax when using animations ans working with #keyframes in order to increase browsers comptability:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
#keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
Instead of:
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
I'm using keyframes in CSS for the first time.
It didn't work on the 2 browsers I tested (Safari and Chrome) and I learned that all keyframe-related properties need browser prefixes, so I added -webkit- but it still won't work
The purpose is to have the images crossfade every 10 seconds, but I only see Image2 constantly.
Here's the code for the div:
<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>
CSS:
#cf {
position:relative;
width:300px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes cf3FadeInOut {
0% {
-webkit-opacity:1;
}
45% {
-webkit-opacity:1;
}
55% {
-webkit-opacity:0;
}
100% {
-webkit-opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
You have made a mistake calling the animation. the id #cf3 doesn't exist. The rest works fine (but delete the -webkit- for opacity, that css property doesn't need it)
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
FIDDLE
EDIT: corrected a typo in the CSS noted by ARLCode below - not relevant.
Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence.
First, I start with all of the text hidden using p {visibility: hidden}, and add an animation to change the visibility value after n seconds.
In addition, I nested <p> in <div> and added an animation to fade <div> by animating opacity. This should fade the text that had just appeared, after (n+x) seconds.
The fade-out is no problem, but the pop-in never works. When I try to animate visibility, no matter how, the page always loads with the selected text visible, despite its earlier setting as hidden. Thus, it doesn't pop-in. It's just already there on the page. Below is the code and a link to codepen.
Am I on the wrong track?
HTML
<p id="one">this is visible on page load and then fades</p>
<div id="two-container"> <!---this div is for fading the text--->
<p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>
CSS
/***************************************
GENERAL
***************************************/
p {
visibility: hidden;
}
/***************************************
TEXT ANIMATION SEQUENCE
***************************************/
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/***************************************
ANIMATION KEYFRAMES
***************************************/
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% {visibility: hidden; }
100% {visibility: visible; }
}
Code Pen Demo
You can see in the preview that the page loads #two as visible, despite p {visibility:hidden;} in the general section. Removing the pop-in animation fixes this. The fade-out animation for #two-container works fine. What am I missing?
A point of clarity: I do NOT expect - as many others here have - for visibility to animate as a fade. I want the desired text to appear suddenly, and AFTERWARDS fade gradually - thus the second animation selecting <div>. The binary nature of visibility is fine.
Okay, here you go I think this is the effect you want.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
visibility: hidden;
-webkit-animation: pop-in 2s;
-webkit-animation-delay: 4s;
-moz-animation: pop-in 2s;
-ms-animation: pop-in 2s;
-o-animation: pop-in 2s;
animation: pop-in 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
from {opacity: 1; }
to {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); }
100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes pop-in {
0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
#keyframes pop-in {
0% { visibility: visible; opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
Codepen Demo
The issue is you placed -webkit- as --webkit- I fixed the CSS down below.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
Code Pen Demo
I'm a developer with not much CSS experience. I want to create a pure CSS3 slideshow using two images. I found some nifty code for doing so, and I've implemented a very slight variation below (basically I just took out the #cf3 id selector for img .top):
.slide {
position:absolute;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
The first image is defined as <img class="slideshow top" src="img1.jpg">. The second is the same except without the "top" class.
When I load the page, all of my other CSS works, but the animation is nowhere to be found. Anyone see where I went wrong?
You need to add vendor specific property names, CSS3 animation is still a draft spec.
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;
-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
/* and all the keyframes too */
#-webkit-keyframes cf3FadeInOut { ... }
#-moz-keyframes cf3FadeInOut { ... }
#-o-keyframes cf3FadeInOut { ... }
#keyframes cf3FadeInOut { ... }