Following code implements a marquee like animation that is working just on firefox. It is not working in chrome. What could be the reason for this ? Here is the jsfiddle that will show up only in the firefox.
CSS :
/* define the animation */
#-webkit-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
#-moz-keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* define your limiting container */
.marquee {
border: solid 2px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
animation-play-state: paused
}
HTML :
<p class="marquee">
<span>
Hey ! What's up?
</span>
</p>
Debugging in chrome highlights this :
Haven't got Chrome installed currently, but remember to prefix -webkit to all CSS3 functions for compatibility.
#-webkit-keyframes marquee {
0% { -webkit-transform: translate(0, 0); }
100% { -webkit-transform: translate(-100%, 0); }
}
EDIT: For the error you added, utilise the above.
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite; /* here you select the animation */
-webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
Try adding the -webkit- prefix to make it work in webkit browsers. Reference
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
-webkit-animation: marquee 15s linear infinite; /* Chrome, Safari, Opera */
animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
-webkit-animation-play-state: paused /* Chrome, Safari, Opera */
animation-play-state: paused
}
As pointed out by James Hunt, you might need to prefix the "transform" attribute with -webkit- aswell.
in the "marque span" css definition, add the -webkit- prefix to the animation attribute do it will work in chrome and safari
Related
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 4 years ago.
I have finally made my background image fade in when my webpage loads, and now I want the animation to be a little delayed so you are able to se the background color for a moment.
I have tried to use the "animation-delay: 2s;" thing in css, but when the page loads, the image is already shown and the animation just starts after 2 seconds. This means that the image is shown, then disappears and then do the animation. I then tried to set the image to "opacity: 0;", but then problem just turns around. So now the image isn't shown to begin with, then the animation tuns, but after that the image disappears again
html:
<div class="imageThing">
</div>
css:
/* attempt 1 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* attempt 2 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
opacity: 0;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
I need the image to be invisible until a number of seconds after the page loads until the animation begins, and then stay visible. I hobe you can help me :)
You can add animation-fill-mode: both to hold the animation before and after.
.imageThing {
animation-fill-mode: both;
}
I'm trying to have a scrolling marquee of sorts across the top of my webpage. I'm not using the tag as it is not supported by Safari. However, even with using CSS Animation, it doesn't seem to work for Safari either. Here's my code:
<h3>Upcoming Shows:...</h3>
This is what I have in my style sheet:
h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
I found one example from this. It worked fine, but anybody knows how to make scrolling start immediately and after it finish scroll from right to left, immediately it start again. Because right now it wait about 3 second to start scrolling. Thanks.
Below is the CSS:
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 10s linear infinite;
-webkit-animation: example1 10s linear infinite;
animation: example1 10s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
From the example you have shown, all you need to do is add the following styles. .example1 h3 {display: inline-block; width: auto;} and change the animation to about 5s intervals.
The reason it scrolls late is because the width of the h3 is the full width of the screen/div with a centered text so it will be delayed by default.
I want to fade in my logo at page load. But, I want it to delay. But when I add the delay property, it first shows, and after the delay period it starts the animation. I want the logo to show, after the delay. What am I doing wrong?
Here's the JSFiddle http://jsfiddle.net/c8hx9/
HTML
<div id="show">hello!</div>
CSS
#show {
position: absolute;
left: 50%;
margin-left: -200px;
top: 200px;
margin-bottom: 300px;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
animation-delay:1s;
-webkit-animation-delay:1s;
}
#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;
}
}
Just add opacity on the first statement class:
#show {
opacity:0;
}
And to keep the final of the animation use forwards.
animation-fill-mode: forwards;
Check this Demo http://jsfiddle.net/c8hx9/2/
I have created a css3 background change on my div tag, but when it loops, it does not loop with the transition. It loops as if someone has just refreshed the page. Could you guys help me into making this a smooth loop, so it loops using the transition
My code is the following:
.slideshow_container{
background-color: #ccc;
position: absolute;
width: 100%;
height: 300px;
top: 160px;
left; 0;
right:0;
z-index:1;
background:#014EAA;
animation:myfirst 25s infinite;
-moz-animation:myfirst 25s infinite; /* Firefox */
-webkit-animation:myfirst 25s infinite; /* Safari and Chrome */
-o-animation:myfirst 25s infinite; /* Opera */
box-shadow: 0 4px 2px -2px gray;
}
#keyframes myfirst
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-o-keyframes myfirst /* Opera */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: #014EAA;}
50% {background: #014EAA;}
50% {background: #467EBB;}
}
http://jsfiddle.net/FqF57/1/
The issue seems to be that your using hex values.
I've tried with just switching from background with color lightblue, to background navy and it works.
#keyframes myfirst
{
from {background:lightblue;}
to {background:navy;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background:lightblue;}
to {background:navy;}
}
And I've also tried with using rgb and that works as well.
http://jsfiddle.net/rF3AH/1/
#keyframes myfirst
{
from {background: rgb(100,100,180);}
to {background:rgb(200,200,250);}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background: rgb(100,100,180);}
to {background:rgb(200,200,250);}
}