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>
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>
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>
I have a couple of animations (bars) I want to delay execution so as to alternate between them. First 1, when it finishes the other and so on... but I have been able only to delay the first iteration of the animation. After that it triggers with no delay!
#-webkit-keyframes width {
0% {
width: 0px;
}
100% {
width: 600px;
}
}
div {
width: 0px;
height: 40px;
padding-left: 0px;
margin: 10px 0;
color: white;
font: 18px Georgia;
line-height: 40px;
vertical-align: middle;
background: #05f;
-webkit-animation: width 15s infinite;
-moz-animation: width 15s infinite;
-o-animation: width 15s infinite;
}
#div1 {
background-color: #008000;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: 8;
}
#div2 {
background-color:#ff0000;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 9s;
-webkit-animation-iteration-count: 8;
}
#div1 {
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: 8;
}
#div2 {
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 9s;
-webkit-animation-iteration-count: 8;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="p_bar" class="p_bar"></div>
To run three animations consecutively, I would suggest to create one animation that will run one third of the total time length and then, you put three different -webkit-animation-delay for every of them. Please see below the example:
#-webkit-keyframes width {
0% {
width: 0px;
}
33.33% {
width: 600px;
}
100% {
width: 600px;
}
}
div {
width: 0px;
height: 40px;
padding-left: 0px;
margin: 10px 0;
color: white;
font: 18px Georgia;
line-height: 40px;
vertical-align: middle;
-webkit-animation: width 15s 8;
-moz-animation: width 15s 8;
-o-animation: width 15s 8;
-webkit-animation-timing-function: linear;
}
#div1 {
background-color: #008000;
}
#div2 {
background-color:#ff0000;
-webkit-animation-delay: 5s;
}
#div3 {
background-color:#0055ff;
-webkit-animation-delay: 10s;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="div3">3rd line</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. :)