I inherited an old website to look after and was asked to try and modernise it a bit with a twitter feed and an image slider.
A question.
My slider works fine except that it jumps from the last image to the first rather than fading. Anyone got an idea where I'm going wrong?
I assume it's got something to do with timings or maybe opacity however, I've spent aeons trying to fix it! Or should I try FadeInOut, etc?
CSS:
.slider {
max-width: 508px;
height: 318px;
margin: 2px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 1px;
}
.slide1 {background: url("images/B18A4640.jpg") no-repeat center;
background-size: cover;
animation:fade 46s infinite;
}
.slide2 {
background: url("images/B18A4669.jpg") no-repeat center;
background-size: cover;
animation:fade2 46s infinite;
}
.slide3 {
background: url("images/harriet1.jpg") no-repeat center;
background-size: cover;
animation:fade3 46s infinite;
}
.slide4 {
background: url("images/B18A4634.jpg") no-repeat center;
background-size: cover;
animation:fade4 46s infinite;
}
.slide5 {
background: url("images/P1080449.jpg") no-repeat center;
background-size: cover;
animation:fade5 46s infinite;
}
.slide6 {
background: url("images/harriet2.jpg") no-repeat center;
background-size: cover;
animation:fade6 46s infinite;
}
#keyframes fade
{
0% {opacity:1}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade2
{
0% {opacity:0}
20% {opacity: 1}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
20% {opacity: 0}
40% { opacity: 1}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade4
{
0% {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 1}
80% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade5
{
0% {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 1}
100% { opacity: 0}
}
#keyframes fade6
{
0% {opacity:0}
20% {opacity: 0}
40% { opacity: 0}
60% { opacity: 0}
80% { opacity: 0}
100% { opacity: 1}
}
This is the Website
html:
<link href="slider.css" rel="stylesheet" type="text/css" />
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
<div class='slide4'></div>
<div class='slide5'></div>
<div class='slide6'></div>
</div>
Cracked it!
.slider {
max-width: 508px;
height: 318px;
margin: 2px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 1px;
}
.slide1 {
background: url("images/B18A4640.jpg") no-repeat center;
background-size: cover;
animation:fade 46s infinite;
-webkit-animation:fade 46s infinite;
}
.slide2 {
background: url("images/B18A4669.jpg") no-repeat center;
background-size: cover;
animation:fade2 46s infinite;
-webkit-animation:fade2 46s infinite;
}
.slide3 {
background: url("images/harriet1.jpg") no-repeat center;
background-size: cover;
animation:fade3 46s infinite;
-webkit-animation:fade3 46s infinite;
}
.slide4 {
background: url("images/B18A4634.jpg") no-repeat center;
background-size: cover;
animation:fade4 46s infinite;
-webkit-animation:fade4 46s infinite;
}
.slide5 {
background: url("images/P1080449.jpg") no-repeat center;
background-size: cover;
animation:fade5 46s infinite;
-webkit-animation:fade5 46s infinite;
}
.slide6 {
background: url("images/harriet2.jpg") no-repeat center;
background-size: cover;
animation:fade6 46s infinite;
-webkit-animation:fade6 46s infinite;
}
#keyframes fade
{
0% {opacity:1}
15% {opacity: 0}
30% { opacity: 0}
45% { opacity: 0}
60% { opacity: 0}
75% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
15% {opacity: 1}
30% { opacity: 0}
45% { opacity: 0}
60% { opacity: 0}
75% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
15% {opacity: 0}
30% { opacity: 1}
45% { opacity: 0}
60% { opacity: 0}
75% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade4
{
0% {opacity:0}
15% {opacity: 0}
30% { opacity: 0}
45% { opacity: 1}
60% { opacity: 0}
75% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade5
{
0% {opacity:0}
15% {opacity: 0}
30% { opacity: 0}
45% { opacity: 0}
60% { opacity: 1}
75% { opacity: 0}
100% { opacity: 0}
}
#keyframes fade6
{
0% {opacity:0}
15% {opacity: 0}
30% { opacity: 0}
45% { opacity: 0}
60% { opacity: 0}
75% { opacity: 1}
100% { opacity: 0}
}
Don't understand why I need the "opacity=1" at the 100% point for the first slide though or if the "-webkit-animation-fade: bits are necessary as it was working except for the jumping without it.
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 }
}
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
I have a simple fading slideshow and I want it to stop animating when the viewport's width is below 800px. All I can find is animation: none !important; but it doesn't seem to work. Here's my code:
fiddle edited with a smaller max-width and simple bg color:
https://jsfiddle.net/alaisl/z2esy1uw/
HTML:
<div id="slide01">
<div class='sliderwrap'>
<div class="wmslogo">
<img src="img/wmslogo.png" id="wmsidlogo" /><br>
WORLDCLASS MANPOWER SERVICES
</div>
<div class='himg1'></div>
<div class='himg2'></div>
<div class='himg3'></div>
</div>
</div>
CSS:
/* -SLIDE01------------------------------------------------- */
#slide01 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background-color: transparent;
}
.sliderwrap {
max-width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.wmslogo {
position: absolute;
width: 100%;
height: auto;
display: flex;
align-items: center;
flex-direction: column;
color: white;
font: 3vw copperplate;
z-index: -1;
}
#wmsidlogo {
max-width: 40vw;
height: auto !important;
}
.himg1, .himg2, .himg3 {
width: 100%;
height: 100vh;
position: absolute;
z-index: -2;
}
.himg1 {
background: url(img/01.jpg)no-repeat center;
background-size: cover;
animation: fade 28s infinite;
-webkit-animation: fade 28s infinite;
}
.himg2 {
background: url(img/02.jpg)no-repeat center;
background-size: cover;
animation: fade2 28s infinite;
-webkit-animation: fade2 28s infinite;
}
.himg3 {
background: url(img/03.jpg)no-repeat center;
background-size: cover;
animation: fade3 28s infinite;
-webkit-animation: fade3 28s infinite;
}
/* KEYFRAMES-------START */
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
/* KEYFRAMES-------END */
#media only screen and (max-width: 800px) {
.slide01 .himg1 .himg2 .himg3 {
animation: none !important;
-webkit-animation: none !important;
display: none;
}
.slide01 {
background-color: bisque;
background-size: cover;
}
}
I found this worked. Pass your keyframes to a media query:
#media only screen and (min-width: 801px) {
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
}
hy guys this is a simple css background animation script everything is working fine but now i want to Set this background in 50% of the width of the window i tried a several way but i am not able to do this and now i am totally frustrated ... any kind of suggestion will help in my project thnx in advance.
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
<body>
<h1>Pure CSS3 Animated Gradient Background</h1>
</body>
</head>
Added an extra div with css properties
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
to achieve 50% width and 100% height.
body {
width: 100wh;
height: 90vh;
color: #fff;;
}
.width-50 {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<body>
<div class="width-50">
<h1>Pure CSS3 Animated Gradient Background</h1>
</div>
</body>
I am trying to make a sailing ship animation. It works, but it is not a smooth animation. It stops in each change I make in the #keyframes. I'm using transform:rotate(-5deg) and then it changes to 5deg to simulate the waves effect, at the same time I make it moves changing the "left" values, but and the result is awful. What piece of css code am I missing to have my animation running soft and smoothly?
Here is code:
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
20% {
trans: -2%;
transform: rotate(5deg)
}
20%,
30% {
left: 20%;
transform: rotate(-5deg)
}
40%,
50% {
left: 40%;
transform: rotate(5deg)
}
60%,
70% {
left: 60%;
transform: rotate(-5deg)
}
80%,
90% {
left: 80%;
transform: rotate(5deg)
}
90%,
100% {
left: 100%;
transform: rotate(-5deg)
}
}
When you add 2 percent values like 20%, 30% { ... }, 40%, 50% { ... }, etc., the rules applied will be the same between those 2 steps/values, hence it stops for a few milliseconds.
If to remove 1 of the percent values, and you can also remove the left from all but the first and last, you get a smooth animation
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
0% {
left: -150px;
transform: rotate(5deg)
}
20% {
transform: rotate(-5deg)
}
40% {
transform: rotate(5deg)
}
60% {
transform: rotate(-5deg)
}
80% {
transform: rotate(5deg)
}
100% {
left: 100%;
transform: rotate(-5deg)
}
}
<div></div>
If to use the same syntax as in your original CSS, one can combine the rules that has the same property/value, like this.
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
0% {
left: -150px;
}
20%, 60%, 100% {
transform: rotate(-5deg)
}
0%, 40%, 80% {
transform: rotate(5deg)
}
100% {
left: 100%;
}
}
<div></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>