I want remove zoom in zoom out effect from mobile view but not getting solution,
.whats_next_float .lets_go_wrapper img.logo_img {
animation: zoominout 3s infinite;
}
animation: zoominout 3s infinite;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: zoominout;
}
Anyone have idea then let me know.
You can set the CSS animation property to none.
#media only screen and (max-width: 600px) {
.whats_next_float .lets_go_wrapper img.logo_img {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
}
Related
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>
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. :)
Here is the CSS:
body {
background-image: url(SMback.jpg);
color: #ecf2f9;
text-align: center;
-webkit-animation: bgscroll 20s infinite linear;
-moz-animation: bgscroll 20s infinite linear;
-ms-animation: bgscroll 20s infinite linear;
-o-animation: bgscroll 20s infinite linear;
}
I have no divs set up, just a simple HTML skeleton. The image is appearing without the scroll. What can I be doing better here?
Did you remember to define your keyframes for the bgscroll animation?
#keyframes bgscroll
{
from {background-position:0 0;}
to {background-position:0 200px;}
}
Here's a fiddle to help you out: http://jsfiddle.net/JC9e8/
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 { ... }