The css animation not working with Firefox and Internet Explorer. Working with Safari and Chrome. Do you have an idea ? Thanks!
<html>
<head>
<style>
body{
width:100%;
height:100%;}
#-webkit-keyframes un {
0%, 25%{ right: 50%; opacity:1}
50% { right:0; opacity:1}
51% { right:50%; opacity:1}
75% { right:100%; opacity:1 }
76%, 100% {opacity:0;}
}
#-moz-keyframes un {
0%, 25%{ right: 50%; opacity:1;}
50% { right:0; opacity:1;}
51% { right:50%; opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
#-o-keyframes un {
0%, 25%{ right: 50%; opacity:1;}
50% { right:0; opacity:1;}
51% { right:50%; opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
#keyframes un {
0%, 25%{ right: 50%; opacity:1;}
50% { right:0; opacity:1;}
51% { right:50%; opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
.un{
top:45%;
font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: un 4s; /* Safari 4+ */
-moz-animation: un 4s; /* Fx 5+ */
-o-animation: un 4s; /* Opera 12+ */
animation: un 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
#-webkit-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%; opacity:1;}
25%, 50%{ right: 50%; opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
#-moz-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%; opacity:1;}
25%, 50%{ right: 50%; opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
#-o-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%; opacity:1;}
25%, 50%{ right: 50%; opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
#keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%; opacity:1;}
25%, 50%{ right: 50%; opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
.deux{
top:45%;
font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: deux 4s; /* Safari 4+ */
-moz-animation: deux 4s; /* Fx 5+ */
-o-animation: deux 4s; /* Opera 12+ */
animation: deux 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
#-webkit-keyframes trois {
0%{ right:50%; opacity:1;}
24% { right:0%; opacity:1;}
25% { right:50%; opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%; opacity:1;}
76%, 100% {opacity:0;}
}
#-moz-keyframes trois {
0%{ right:50%; opacity:1;}
24% { right:0%; opacity:1;}
25% { right:50%; opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%; opacity:1;}
76%, 100% {opacity:0;}
}
#-o-keyframes trois {
0%{ right:50%; opacity:1;}
24% { right:0%; opacity:1;}
25% { right:50%; opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%; opacity:1;}
76%, 100% {opacity:0;}
}
#keyframes trois {
0%{ right:50%; opacity:1;}
24% { right:0%; opacity:1;}
25% { right:50%; opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%; opacity:1;}
76%, 100% {opacity:0;}
}
.trois{
top:45%;
font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: trois 4s; /* Safari 4+ */
-moz-animation: trois 4s; /* Fx 5+ */
-o-animation: trois 4s; /* Opera 12+ */
animation: trois 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
#-webkit-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
#-moz-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
#-o-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
#keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
.zero{
top:45%;
font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: zero 4s; /* Safari 4+ */
-moz-animation: zero 4s; /* Fx 5+ */
-o-animation: zero 4s; /* Opera 12+ */
animation: zero 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
.compte{
position:fixed;
height:100%;
width:100%;
overflow:hidden;
background-color:black;
color:white;
z-index:-9999;
}
</style>
</head>
<body>
<div class="compte">
<div class="un">3</div>
<div class="deux">2</div>
<div class="trois">1</div>
<div class="zero">0</div></div>
</body>
</html>
Thank you ! Is this a known bug? Am I doing something wrong? The animation css3 not working with Firefox and IE. That's a countdown.
add the following property to your element classes (.un,.deux,etc) :
right: 0;
For example:
.un {
top: 45%;
font-size: 40px;
text-align: center;
position: absolute;
right: 0;
-webkit-animation: un 4s;
-moz-animation: un 4s;
-o-animation: un 4s;
-ms-animation: un 4s;
animation: un 4s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
Full HTML:
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 100%;
height: 100%;
}
#-webkit-keyframes un {
0%, 25% {
right: 50%;
opacity: 1;
}
50% {
right: 0;
opacity: 1;
}
51% {
right: 50%;
opacity: 1;
}
75% {
right: 100%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#-moz-keyframes un {
0%, 25% {
right: 50%;
opacity: 1;
}
50% {
right: 0;
opacity: 1;
}
51% {
right: 50%;
opacity: 1;
}
75% {
right: 100%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#-o-keyframes un {
0%, 25% {
right: 50%;
opacity: 1;
}
50% {
right: 0;
opacity: 1;
}
51% {
right: 50%;
opacity: 1;
}
75% {
right: 100%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#keyframes un {
0%, 25% {
right: 50%;
opacity: 1;
}
50% {
right: 0;
opacity: 1;
}
51% {
right: 50%;
opacity: 1;
}
75% {
right: 100%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
.un {
top: 45%;
font-size: 40px;
text-align: center;
position: absolute;
right: 0;
-webkit-animation: un 4s;
-moz-animation: un 4s;
-o-animation: un 4s;
-ms-animation: un 4s;
animation: un 4s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
#-webkit-keyframes deux {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 100%;
opacity: 1;
}
25%, 50% {
right: 50%;
opacity: 1;
}
75% {
right: 0%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#-moz-keyframes deux {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 100%;
opacity: 1;
}
25%, 50% {
right: 50%;
opacity: 1;
}
75% {
right: 0%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#-o-keyframes deux {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 100%;
opacity: 1;
}
25%, 50% {
right: 50%;
opacity: 1;
}
75% {
right: 0%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#keyframes deux {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 100%;
opacity: 1;
}
25%, 50% {
right: 50%;
opacity: 1;
}
75% {
right: 0%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
.deux {
top: 45%;
font-size: 40px;
text-align: center;
position: absolute;
right: 0;
-webkit-animation: deux 4s;
-moz-animation: deux 4s;
-o-animation: deux 4s;
-ms-animation: deux 4s;
animation: deux 4s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
#-webkit-keyframes trois {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 0%;
opacity: 1;
}
25% {
right: 50%;
opacity: 1;
}
50% {
right: 100%;
opacity: 1;
}
51%, 75% {
right: 50%;
opacity: 1;
}
76%, 100% {
opacity: 0;
}
}
#-moz-keyframes trois {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 0%;
opacity: 1;
}
25% {
right: 50%;
opacity: 1;
}
50% {
right: 100%;
opacity: 1;
}
51%, 75% {
right: 50%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#-o-keyframes trois {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 0%;
opacity: 1;
}
25% {
right: 50%;
opacity: 1;
}
50% {
right: 100%;
opacity: 1;
}
51%, 75% {
right: 50%;
opacity: 1;
}
76%, 100% { opacity: 0; }
}
#keyframes trois {
0% {
right: 50%;
opacity: 1;
}
24% {
right: 0;
opacity: 1;
}
25% {
right: 50%;
opacity: 1;
}
50% {
right: 100%;
opacity: 1;
}
51%, 75% {
right: 50%;
opacity: 1;
}
76%, 100% {
opacity: 0;
}
}
.trois {
top: 45%;
font-size: 40px;
vertical-align: 50%;
position: absolute;
right: 0;
-webkit-animation: trois 4s;
-moz-animation: trois 4s;
-ms-animation: trois 4s;
-o-animation: trois 4s;
animation: trois 4s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
#-webkit-keyframes zero {
0%, 75% {
right: 50%;
opacity: 0;
}
76%, 99% {
right: 50%;
opacity: 1;
}
100% {
opacity: 0;
right: 50%;
}
}
#-moz-keyframes zero {
0%, 75% {
right: 50%;
opacity: 0;
}
76%, 99% {
right: 50%;
opacity: 1;
}
100% {
opacity: 0;
right: 50%;
}
}
#-o-keyframes zero {
0%, 75% {
right: 50%;
opacity: 0;
}
76%, 99% {
right: 50%;
opacity: 1;
}
100% {
opacity: 0;
right: 50%;
}
}
#keyframes zero {
0%, 75% {
right: 50%;
opacity: 0;
}
76%, 99% {
right: 50%;
opacity: 1;
}
100% {
opacity: 0;
right: 50%;
}
}
.zero {
top: 45%;
font-size: 40px;
right: 0;
text-align: center;
position: absolute;
-webkit-animation: zero 4s;
-moz-animation: zero 4s;
-o-animation: zero 4s;
-ms-animation: zero 4s;
animation: zero 4s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.compte {
height: 100%;
width: 100% ;
overflow: hidden;
background-color: black;
color: white;
z-index: -9999;
}
</style>
</head>
<body>
<div class="compte">
<div class="un">3</div>
<div class="deux">2</div>
<div class="trois">1</div>
<div class="zero">0</div>
</div>
</body>
</html>
Related
The CSS seems to be horizontally centering the text by the first letter. I'd like to make it be perfectly centered on the page, without breaking the animation. I added a gradient to show the exact horizontal center of the page.
.wrapper {
height: 100vh;
background: linear-gradient(to right, #1e5799 0%,#ffffff 50%,#7db9e8 100%);
}
.container {
text-align: center;
}
.vcenter {
position: relative;
top: calc(50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.container h2 {
background: red;
display: inline-block;
position: absolute;
opacity: 0;
overflow: visible;
-webkit-animation: rotateWord 12s linear infinite 0s;
-ms-animation: rotateWord 12s linear infinite 0s;
animation: rotateWord 12s linear infinite 0s;
margin: 0;
}
.container h2:nth-child(2) {
-webkit-animation: rotateWord 12s linear infinite 3s;
-ms-animation: rotateWord 12s linear infinite 3s;
animation: rotateWord 12s linear infinite 3s;
}
.container h2:nth-child(3) {
-webkit-animation: rotateWord 12s linear infinite 6s;
-ms-animation: rotateWord 12s linear infinite 6s;
animation: rotateWord 12s linear infinite 6s;
}
.container h2:nth-child(4) {
-webkit-animation: rotateWord 12s linear infinite 9s;
-ms-animation: rotateWord 12s linear infinite 9s;
animation: rotateWord 12s linear infinite 9s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="wrapper">
<div class="container vcenter">
<h2>HEY THERE THIS IS TEXT</h2>
<h2>DIFFERENT TEXT</h2>
<h2>THIS IS TEXT</h2>
<h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>
</div>
Make sure to set the correct transform values in the #keyframes, also the middle div container can be removed to make it easier.
jsFiddle
body {
margin: 0;
}
.container {
height: 100vh;
text-align: center;
background: linear-gradient(to right, #1e5799 0%, #ffffff 50%, #7db9e8 100%);
}
.container h2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
margin: 0;
}
.container h2:nth-child(1) {
animation: rotateWord 12s linear infinite 0s;
}
.container h2:nth-child(2) {
animation: rotateWord 12s linear infinite 3s;
}
.container h2:nth-child(3) {
animation: rotateWord 12s linear infinite 6s;
}
.container h2:nth-child(4) {
animation: rotateWord 12s linear infinite 9s;
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
transform: translate(-50%, -30px);
}
5% {
opacity: 1;
transform: translate(-50%, 0px);
}
17% {
opacity: 1;
transform: translate(-50%, 0px);
}
20% {
opacity: 0;
transform: translate(-50%, 30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="container">
<h2>HEY THERE THIS IS TEXT</h2>
<h2>DIFFERENT TEXT</h2>
<h2>THIS IS TEXT</h2>
<h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>
I'm using this fun scrolling text effect on my 404 page, but I need the (short) text to stop and just remain visible once it reaches the top of the page instead of scrolling all the way up and away. How do I make that happen with just CSS? I'd like to use as little js as possible.
I butchered the codebase a bit, but basically you want to remove infinite iteration count from the slide animations and add in its place forward (which is a fill mode). Then you want to replace the top values in the animations with top: 0%. Lastly, you want to remove the black fade on #titles:after which can be done by either removing it entirely or lowering its opacity. Still needs work, but this is the general idea (going to have to run it in "Full page" mode):
#import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html
{
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #ff6;
background-color: #000;
overflow: hidden;
}
p#start
{
position: relative;
width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
#-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
h1 sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}
#-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
#-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
#-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
#-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
#keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 10em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
pointer-events: none;
}
#titles p
{
text-align: justify;
margin: 0.8em 0;
}
#titles p.center
{
text-align: center;
}
#titles a
{
color: #ff6;
text-decoration: underline;
}
#titlecontent
{
position: absolute;
top: 100%;
width: 100%;
-webkit-animation: scroll 10s linear 4s forwards;
-moz-animation: scroll 10s linear 4s forwards;
-ms-animation: scroll 10s linear 4s forwards;
-o-animation: scroll 10s linear 4s forwards;
animation: scroll 10s linear 4s forwards;
}
/* animation */
#-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-moz-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-ms-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-o-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
<p id="start">A short time ago in a browser very, very close…</p>
<h1>STAR WARS<sub>titles in CSS3</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">ERROR 404</p>
<p class="center">Page not found</p>
</div></div>
I've added rotating text w/ CSS animation. I want the animation to go through 1 cycle and freeze on the last frame. With my current code, the animation does one cycle and ends on a blank frame. Any suggestions on how to correct this?
body {} .rw-wrapper {
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #444;
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 8s 1 forwards;
-ms-animation: rotateWord 8s 1 forwards;
animation: rotateWord 8s 1 forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #7a6b9d;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Test</span>
<div class="rw-words rw-words-1">
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
</div>
</h2>
</section>
You keyframe at 100% has opacity zero. You can write a separate animation for the last work and use that instead.
Like this (I didn't add vendor-specific keyframes, just #keyframes rotateLastWord, but you can add them as well):
body {} .rw-wrapper {
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #444;
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 8s 1 forwards;
-ms-animation: rotateWord 8s 1 forwards;
animation: rotateWord 8s 1 forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #6b739d;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
/* stuff below added by Shomz */
.rw-words-1 span#last {
-webkit-animation: rotateLastWord 8s 1 forwards 6s;
-ms-animation: rotateLastWord 8s 1 forwards 6s;
animation: rotateLastWord 8s 1 forwards 6s;
}
#keyframes rotateLastWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {opacity: 1}
}
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Test</span>
<div class="rw-words rw-words-1">
<span>one</span>
<span>two</span>
<span>three</span>
<span id="last">four</span>
</div>
</h2>
</section>
I'm working on a splash screen where I'm supposed to animate the transition of a logo from the center to the top left of the screen. with roll out CS3 effect I have done this but I want to move it to the top left
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
#keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
so how I can combine between transition and animation in css to do that ?
Here, you also need to specify right, left and top properties in your animation so as to move the logo from the center to the top-left. Also you need to add translateY to your animation.
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
/* to center */
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
#-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
right: 0;
top: 50%;
}
100% {
opacity: 0;
-webkit-transform: translateX(-100px) translateY(-100%) rotate(720deg);
right: 100%;
top: 0;
}
}
#keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) translateY(0px) rotate(0deg);
right: 0;
top: 50%;
}
100% {
opacity: 0;
transform: translateX(-100px) translateY(-100%)
right: 100%;
top: 0;
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
See here: http://codepen.io/anon/pen/mJEKyv
So i'm trying to use this CSS slider and it works perfect in IE and firefox, but not for chrome. When the first image loads it looks normal but when the second image has filled the box i get a white box in the bottom of the page. Image
I found this code at Pure CCS3 Cycling Slideshow but this problem occurred when i tried to customize it for my school project.
HTML:
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<img src="images/turtleSlider/tur1.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
<li id="second" class="secondanimation">
<img src="images/turtleSlider/tur2.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>My Dad Tomas & A Turtle</h1> </div>
</li>
<li id="third" class="thirdanimation">
<img src="images/turtleSlider/tur3.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
<li id="fourth" class="fourthanimation">
<img src="images/turtleSlider/tur4.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Me & A Turtle</h1> </div>
</li>
<li id="fifth" class="fifthanimation">
<img src="images/turtleSlider/tur5.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
CSS:
html{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family:"Open Sans", serif;
margin: 30px 15% 20px 15%;
min-width: 1010px;
}
#slider {
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 500px;
width: 667px;
overflow: visible;
position: relative;
float: left;
}
#mask {
overflow: hidden;
height: 500px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 667px; /* Width Image */
height: 500px; /* Height Image */
position: absolute;
top: -505px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider li.firstanimation {
-webkit-animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;
animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-webkit-animation: cycletwo 25s linear infinite;
-moz-animation: cycletwo 25s linear infinite;
animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-webkit-animation: cyclethree 25s linear infinite;
-moz-animation: cyclethree 25s linear infinite;
animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-webkit-animation: cyclefour 25s linear infinite;
-moz-animation: cyclefour 25s linear infinite;
animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-webkit-animation: cyclefive 25s linear infinite;
-moz-animation: cyclefive 25s linear infinite;
animation: cyclefive 25s linear infinite;
}
#-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:505px; opacity:0; z-index:0; }
21% { top:-505px; opacity:0; z-index:-1; }
50% { top:-505px; opacity:0; z-index:-1; }
92% { top:-505px; opacity:0; z-index:0; }
96% { top:-505px; opacity:0; }
100%{ top:0px; opacity:1; }
}
#-webkit-keyframes cycletwo {
0% { top:-505px; opacity:0; }
16% { top:-505px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:505px; opacity:0; z-index:0; }
41% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclethree {
0% { top:-505px; opacity:0; }
36% { top:-505px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:505px; opacity:0; z-index:0; }
61% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclefour {
0% { top:-505px; opacity:0; }
56% { top:-505px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:505px; opacity:0; z-index:0; }
81% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclefive {
0% { top:-505px; opacity:0; }
76% { top:-505px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:505px; opacity:0; z-index:0; }
}
#-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:505px; opacity:0; z-index:0; }
21% { top:-505px; opacity:0; z-index:-1; }
92% { top:-505px; opacity:0; z-index:0; }
96% { top:-505px; opacity:0; }
100%{ top:0px; opacity:1; }
}
#-moz-keyframes cycletwo {
0% { top:-505px; opacity:0; }
16% { top:-505px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:505px; opacity:0; z-index:0; }
41% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclethree {
0% { top:-505px; opacity:0; }
36% { top:-505px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:505px; opacity:0; z-index:0; }
61% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclefour {
0% { top:-505px; opacity:0; }
56% { top:-505px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:505px; opacity:0; z-index:0; }
81% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclefive {
0% { top:-505px; opacity:0; }
76% { top:-505px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:505px; opacity:0; z-index:0; }
}
#keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 505px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -505px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -505px; opacity: 0; z-index: 0; }
96% { top: -505px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
#keyframes cycletwo {
0% { top: -505px; opacity: 0; } /* Original Position */
16% { top: -505px; opacity: 0; }/* Starts moving after 16% to this position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
40% { top: 505px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
41% { top: -505px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclethree {
0% { top: -505px; opacity: 0; }
36% { top: -505px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 505px; opacity: 0; z-index: 0; }
61% { top: -505px; opacity: 0; z-index: -1; }
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclefour {
0% { top: -505px; opacity: 0; }
56% { top: -505px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 505px; opacity: 0; z-index: 0; }
81% { top: -505px; opacity: 0; z-index: -1; }
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclefive {
0% { top: -505px; opacity: 0; }
76% { top: -505px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 505px; opacity: 0; z-index: 0; }
}
.progress-bar {
position: relative;
top: -5px;
width: 750px;
height: 5px;
background: #000;
-webkit-animation: fullexpand 25s ease-out infinite;
-moz-animation: fullexpand 25s ease-out infinite;
animation: fullexpand 25s ease-out infinite;
}
#-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#keyframes fullexpand {
/* In these keyframes, the progress-bar is stationary */
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
/* In these keyframes, the progress-bar starts to come alive */
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
/* In these keyframes, the progress-bar moves forward for 3 seconds */
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
/* In these keyframes, the progress-bar has finished his path */
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
/* In these keyframes, the progress-bar will disappear and then resume the cycle */
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#slider:hover .progress-bar {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#slider .tooltip {
background: rgba(0,0,0,0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 10px;
text-align: Right;
margin-right: 10px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left: 0px;
}
Add following code to your CSS file:
html,
body{
height: 100%;
}
This white rectangle is an empty space on the page because document does not cover whole view-port.
I figured it out. I added some credits at the bottom as a <footer> and now it doesn't show up anymore. Thanks for the help though!