I'm trying to add animation to create something like a carousel, but the animation part in my CSS is not working.
div#trustw {
padding: 20px;
}
div#trustc {
height: 38px;
background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
background-repeat: repeat-x;
-webkit-animation: animatedBackground 20s linear infinite;
animation: animatedBackground 20s linear infinite;
animation-duration: 20s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: animatedBackgroud;
}
<div id="trustw" class="container-fluid">
<div id="trustc" class="container"></div>
</div>
You forgot to define the animation:
#keyframes animatedBackgroud {
from {background-position: 0%;}
to {background-position: 100%;}
}
div#trustw {
padding: 20px;
}
div#trustc {
height: 38px;
background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
background-repeat: repeat-x;
-webkit-animation: animatedBackground 20s linear infinite;
animation: animatedBackground 20s linear infinite;
animation-duration: 20s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: animatedBackgroud;
}
#keyframes animatedBackgroud {
from {background-position: 0%;}
to {background-position: 100%;}
}
<div id="trustw" class="container-fluid">
<div id="trustc" class="container"></div>
</div>
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>
The boxes are stacked on top of each other using the position: absolute property. When you hover over the container they should rotate with a delay between and have the border turn orange to create some sort of effect.
They aren't moving at all however.
.main-animation-box {
border: solid orange;
height: 30vh;
width: 16vw;
position: absolute;
}
.email-sub-box:hover .main-animation-box-1 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 0s;
}
.email-sub-box:hover .main-animation-box-2 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 1s;
}
.email-sub-box:hover .main-animation-box-3 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 1.5s;
}
.email-sub-box:hover .main-animation-box-4 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-5 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 2.5s;
}
#keyframes box-rotate {
10% {
border: solid orange;
}
50% {
transform: rotateY(720deg);
}
}
<div class="email-sub-box email-left">
<div class="main-animation-box main-animation-box-1"></div>
<div class="main-animation-box main-animation-box-2"></div>
<div class="main-animation-box main-animation-box-3"></div>
<div class="main-animation-box main-animation-box-4"></div>
<div class="main-animation-box main-animation-box-5"></div>
</div>
i have changed animation: box-rotate; to animation-name: box-rotate; and animation-timing-function: 5s; to animation-timing-function: ease-out;
.main-animation-box {
border: solid orange;
height: 30vh;
width: 16vw;
position: absolute
}
.email-sub-box:hover .main-animation-box-1 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-2 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.email-sub-box:hover .main-animation-box-3 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1.5s;
}
.email-sub-box:hover .main-animation-box-4 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-5 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2.5s;
}
#keyframes box-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class = "email-sub-box email-left">
<div class="main-animation-box main-animation-box-1"></div>
<div class="main-animation-box main-animation-box-2"></div>
<div class="main-animation-box main-animation-box-3"></div>
<div class="main-animation-box main-animation-box-4"></div>
<div class="main-animation-box main-animation-box-5"></div>
</div>
Well, I am trying to animate decrease in width of a div. I have successfully done it but it decreasing from right to left. I want it decrease from left to right. Please help.
.box{height:0%;
width:830px;
border-bottom:20px solid #c00;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
100% {
width: 1px;
}
}
You can also use Right and Position property of css.
div.b {
height: 0%;
border-bottom: 20px solid #c00;
width: 830px;
right: 30px;
position: absolute;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
100% {
width: 10px;
}
<!DOCTYPE html>
<html>
<body>
<div class="b"></div>
</body>
</html>
Just add float:right to .box class
.box_LtR{
height:0%;
width:830px;
border-bottom:20px solid #c00;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
100% {
width: 1px;
}
}
.box_RtL{
height:0%;
width:830px;
float:right;
border-bottom:20px solid #c00;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
}
#keyframes increase2 {
100% {
width: 1px;
}
}
<div class="box_LtR">
</div>
<div class="box_RtL">
</div>
Another !
.box_LtR{
height:0%;
width:830px;
border-bottom:20px solid #c00;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
100% {
width: 1px;
}
}
.box_RtL{
height:0%;
width:1px;
border-bottom:20px solid #c00;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
}
#keyframes increase2 {
100% {
width: 830px;
}
}
<div class="box_LtR">
</div>
<div class="box_RtL">
</div>
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. :)
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 { ... }