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!
Related
I am using a CSS3 text slider that was made for 3 lines of text. I wish to add two more lines but cannot figure out how to recalculate keyframes.
I added the additional items in CSS, but do not know how to recalculate the keyframes.
Any help is greatly appreciated!
HTML:
<p class="item-1">Text Line 1</p>
<p class="item-2">Text Line 2</p>
<p class="item-3">Text Line 3</p>
<p class="item-4">Text Line 4</p>
<p class="item-5">Text Line 5</p>
CSS:
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
font-family: 'Suez One';
font-size: 72px;
line-height: 80px;
color: white !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 8px 8px 3px #000000;
position: absolute;
display: block;
width: 60%;
z-index: 1001;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.item-1{
-webkit-animation-name: anim-1;
animation-name: anim-1;
}
.item-2{
-webkit-animation-name: anim-2;
animation-name: anim-2;
}
.item-3{
-webkit-animation-name: anim-3;
animation-name: anim-3;
}
.item-4{
-webkit-animation-name: anim-4;
animation-name: anim-4;
}
.item-5{
-webkit-animation-name: anim-5;
animation-name: anim-5;
}
#-webkit-keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%, 25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
When posting this question I got an error message "It looks like your post is mostly code, please add more details" That's why I am typing this. Trying to have some more words so it will let me post this question. Thanks for your patience.
Here's a script that writes the animation on the fly, based on number of slides:
'use strict';
var slider = document.querySelector('.css-slider'),
slides = slider.querySelectorAll('p'),
css = '';
for (var i = 0; i < slides.length; i++) {
css += '.css-slider>*:nth-child(' + (i + 1) + '){animation-name:a-' + i + '}' + ('#keyframes a-' + i + '{') + ('0%,' + i * 100 / slides.length + '%{transform: translatex(-100%)}') + (i * 100 / slides.length + 25 / slides.length + '%,' + ((i + 1) * 100 / slides.length - 25 / slides.length) + '%{transform: translatex(0)}') + ((i + 1) * 100 / slides.length + '%,100%{transform: translatex(100%)}') + '}';
}
css += '.css-slider>*{animation-duration:' + slides.length * 4 + 's;';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
#import url('https://fonts.googleapis.com/css?family=Suez+One');
.css-slider > * {
font-family: 'Suez One';
font-size: 72px;
line-height: 55px;
color: white;
text-shadow: 5px 5px 3px rgba(0,0,0,.65);
position: absolute;
top: 0;
width: 100%;
text-align: center;
animation-timing-function: cubic-bezier(.4,0,.2,1);
animation-iteration-count: infinite;
}
.css-slider, .css-slider > *:last-child {
position: relative;
}
.css-slider {
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0;
overflow-x: hidden;
}
<div class="css-slider">
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
<p>Text Line 4</p>
<p>Text Line 5</p>
<p>Text Line 6</p>
<p>Text Line 7</p>
</div>
Note I changed your initial markup, as I wanted it to write a more general solution, not one tailored to your particular case.
But if you're only interested in the CSS for 5 items and you want to keep your markup here's what you're asking for:
.item-1 { -webkit-animation-name: a-0; animation-name: a-0 }
.item-2 { -webkit-animation-name: a-1; animation-name: a-1 }
.item-3 { -webkit-animation-name: a-2; animation-name: a-2 }
.item-4 { -webkit-animation-name: a-3; animation-name: a-3 }
.item-5 { -webkit-animation-name: a-4; animation-name: a-4 }
#-webkit-keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
And the principle behind the keyframes is:
.item-${n+1} { animation-name: a-${n} }
#keyframes a-${n} {
0%, enterStart { left state ruleset }
enterEnd, leaveStart { center state ruleset }
leaveEnd, 100% { right state ruleset }
}
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>
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>
So as the title says, my keyframes are glitchy on Safari only. It works perfectly fine on moz, ms,o but not on safari. Here is the code of my keyframes :
#keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-webkit-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-moz-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-ms-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-o-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
And here is my progress_bar class that calls the key frame :
.progress_bar {
position:absolute;
left:0;
top:0;
width:0%;
height:2px;
background: blue;
animation: bar_progress 2s linear infinite;
-webkit-animation: bar_progress 2s linear infinite;
-moz-animation: bar_progress 2s linear infinite;
-ms-animation: bar_progress 2s linear infinite;
-o-animation: bar_progress 2s linear infinite;
}
Thank you in advance!
The following code resets the animation to the first frame and repeats. For some reason animation-fill-mode:forwards; is not working.
I'm not sure if it has to do with the pixels or the top margins.
Here is the link to my code. http://jsfiddle.net/HGHyQ/
HTML
<div id="wrapper_founded">
<div id="date_anim">
<span id="first_num">1 2</span>
<span id="second_num">6 7 8 9 0</span>
<span id="third_num">1 2 3 4 5 6 7 1</span>
<span id="fourth_num">4 5 6 7 8 9 0</span>
</div>
</div>
CSS
#wrapper_founded {
position:relative;
width:100%;
float:left;
}
#wrapper_founded h3 {
padding:0 60px;
}
#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;
}
#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}
#wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s infinite ease-in-out;
-webkit-animation:first_num 6s infinite ease-in-out;
animation:first_num 6s infinite ease-in-out;
}
#-moz-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s infinite ease-in-out;
-webkit-animation:second_num 6s infinite ease-in-out;
animation:second_num 6s infinite ease-in-out;
}
#-moz-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#third_num {
top:-381px;
-moz-animation:third_num 6s infinite ease-in-out;
-webkit-animation:third_num 6s infinite ease-in-out;
animation:third_num 6s infinite ease-in-out;
}
#-moz-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#-webkit-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#keyframes third_num {
60% {
top:3px;
}
85% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s infinite ease-in-out;
-webkit-animation:fourth_num 6s infinite ease-in-out;
animation:fourth_num 6s infinite ease-in-out;
}
#-moz-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:143px;
display:block;
margin:0 auto 35px;
}
The main issue is that the keyframes sections need to run from 0%-100% instead of 60%-100%. I have found that using the from and to blocks instead of the percentages to be the easiest way of getting a smooth and consistent animation.
In addition, I removed the infinite repeat and re-added the three flavors of animation-fill-mode:forwards. (Tested in Chrome and IE)
Fiddle: http://jsfiddle.net/hzNad/
#wrapper_founded {
position:relative;
width:100%;
float:left;
}
#wrapper_founded h3 {
padding:0 60px;
}
#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;
}
#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}
#wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:first_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:first_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#-webkit-keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:second_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:second_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#-webkit-keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#wrapper_founded #date_anim span#third_num {
-moz-animation:third_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:third_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:third_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#-webkit-keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:fourth_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:fourth_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#-webkit-keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:140;
display:block;
margin:0 auto 35px;
}