Am trying to animate an image (that uses class="under") and is overlapped by a still image (that uses class="over"). Animation effect works fine for the lower image with Firefox and IE-9 browsers, whereas Chrome does not show animation. Chrome shows both still images.
Any solution please.
.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 1000px;
height: 160px;
background-image: url(images/img7.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
}
Thanks
Anand
Try #-webkit-keyframes animatedBackground
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
Related
I have a background (cloud) and I want to animate it horizontally. If I start the animation from the left most position then the animtion is smooth but if I start the animation from the center the it becomes abrupt.
I know why is it behaving so but not getting a clue on how to make it smooth.
See the abrupt on when starting from the middle:
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 30vw 0;
}
to {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
Ideally, it should start from the center, then should go to the rightmost point and then should come out from the leftmost point and continue to reach to the center.
Solution 1: Not amazing
By your definition of "smooth" (i.e., going out the right and coming out the left), you can add additional breakpoints. Just make sure to set the percentage timings correct so that it is travelling the same speed before and after reaching the right edge.
If you make the jump between right edge and left edge fast enough, it should show smoothly.
body, html {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
0% {
background-position: 30vw 0;
}
63.6% {
background-position: 100vw 0;
}
63.6000001% {
background-position: -10vw 0;
}
100% {
background-position: 30vw 0;
}
}
<div class="trt-clouds-1"></div>
(The animation travels 110vw total: 70 to the right, and 40 on the way back. To make it smooth, the animation spends 7/11 (63.6%) of the way going there, and the rest coming back, hence the timings.)
Solution 2: Pretty elegant
A second, more elegant option would be to use the animation-delay property with a negative start value. (This doesn't start at exactly 30vw, but you get the point).
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: -2s;
}
#keyframes animatedBackground {
0% {
background-position: -10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: 0;
}
#keyframes animatedBackground {
0% {
background-position:-10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
the only thing you have to is add a background position to your css
Another trick is to rely on some percentage and optimize the animation like below.
.trt-clouds-1 {
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 10vw) 10vw;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
It will also work even with a non-full width div since we are no more relying on vw unit inside the animation:
.trt-clouds-1 {
height: 200px;
width:200px;
border:1px solid;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 50px) 50px;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
Related question to get more details about the calculation: Using percentage values with background-position on a linear gradient
You can also consider pseudo element and translation to have better performance:
.trt-clouds-1 {
height: 200px;
position:relative;
overflow:hidden;
}
.trt-clouds-1:before {
content:"";
position:absolute;
top:0;
left:0;
width:calc(200% + 10vw);
height:10vw;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: auto 100%;
background-position:center;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
transform:translate(-50%);
}
}
<div class="trt-clouds-1"></div>
Two questions:
I found a pretty cool font animation on Codepen, but lost the link for it. I have been looking for it online for the past hour and with no luck!
But anyways, there is a issue with this code. Firefox won't give me the results I want. I have tried adding -moz- to most of the code, but the same background image appears like in the picture I have below.
Is this just not possible with Firefox?
My second question is: I wanted the font to change text with a kind of fade in effect when you hover over a button. I managed that but the animation on the hover text does not move. I am guessing this is because there are two animations attached to the div; is there a way around this?
How can I fix these issues? Thanks for your time.
.font{
position:fixed;
width: 100%;
left: 5%;
top: 5%;
}
.font:before{
position:absolute;
content:"TEST";
top: -10px;
font: 700 5em/1 "Orbitron", sans-serif;
letter-spacing: 0;
padding:.25em 0.325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba (255,255,255,.5);
background: url(https://media.24ways.org/2008/02/pattern-howto01.gif) repeat-y;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation: aitf 10s linear infinite;
-moz-transform: translate3d(0,0,0);
-moz-backface-visibility: hidden;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 10s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
#keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-moz-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.icon {
position: relative;
width: 50px;
height: 50px;
top: 150px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
background: #730A0C;
}
.icon:hover ~ .font:before{
content:"TEST2";
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
background-position: center;
}
/*Fade Inn Animation*/
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*Fade Inn Animation*/
<div class="icon"> </div>
<div class="font"> </div>
The text-fill-color property is not available in Firefox until Firefox 48 comes out in August of 2016. The only browers that support this property right now are Chrome, Safari, and Opera using the -webkit- prefix.
Is there a way to make this smoother? Or if anyone knows how to do this better I am all ears.
Here is what I have
html {
background: url(Images/landscape.jpeg)repeat-y;
background-size: 150%;
background-position: bottom;
-webkit-animation: backgroundScroll 190s linear infinite;
animation: backgroundScroll 190s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
#keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
You might get better results setting the background image on an element and then moving the entire element with transform: translate:
#keyframes doScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-400);
}
}
Check out this older, but still relevant article.
I got it! I just needed to play with the interval speed. I slowed it down to around 85s and its a lot smoother. I was dragging it out to long.
You can do it like this:
html {
background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
background-size: 150%;
background-position: 0px 0px;
animation: animatedBackground 15s linear infinite;
-moz-animation: animatedBackground 15s linear infinite;
-webkit-animation: animatedBackground 15s linear infinite;
-ms-animation: animatedBackground 15s linear infinite;
-o-animation: animatedBackground 15s linear infinite;
}
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
I have the following code:
Here's the CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
Which is for the following HTML:
<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>
I am trying to animate the body background to be clouds moving, but the entire page is scrolling, along with the background. For example, if you were to run the above code, the text "This content is moving, why?" would be moving. How can I fix this?
I show you an example working with your code:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>
Hi I've been trying to do a simple animation with css and a sprite, and it doesn't seem to work. Am I missing something? I've made a JS Fiddle sample.
Can some one explain me why this doesnt work?
http://jsfiddle.net/CmF6A/
<body>
<div id="wrapper">
<div id="bike">
</div>
</div>
</body>
div#wrapper {
width: 64px;
height: 80px;
background-color: #c0b898;
margin: auto;
}
#-webkit-keyframes running {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: running 1s steps(6, end) infinite;
}
There seems to be a problem with your animation name if you renamed it to something else it works.
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: anim 1s steps(6, end) infinite;
}
#-webkit-keyframes anim {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
An example: http://jsfiddle.net/CmF6A/2/
Here is a JSfiddle :)
I have simply updated your own fiddle.
http://jsfiddle.net/CmF6A/5/
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
from {background-position:0px;}
to {background-position:-320px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-position:0px;}
to {background-position:-320px;}
}
Check out this tutorial to create Sprite sheet animation
https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}