Dream Of Code: The League of extraordinary newspapers (CSS)

/*
Source code for a pretty insane animation for newspapers.
Watch the 4 second video : https://youtu.be/KSuUCiBhZ_A
*/

<html>
<head>
<style>
.card{
float:left;
width: 30%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px #aaa;
background: blue;
border-radius: 5px;
-webkit-animation: fly 1s 1s both;
animation: fly 1s 1s ease both;
}
.card1{
float:left;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px #aaa;
background: red;
border-radius: 5px;
}
.card2{
clear:both;
width: 45%;
height:40%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px #aaa;
background: orange;
border-radius: 5px;
-webkit-animation: fly3 1.5s 1.5s both;
animation: fly3 1.5s 1.5s ease both;
}

@keyframes fly {
from {

transform: translateY(80em) rotate(-1620deg);
opacity:0;
}
}

@-webkit-keyframes fly {
from {

-webkit-transform: translateY(80em) rotate(-1620deg);
opacity:0;
}
}

@keyframes fly1 {
from {

transform:translateX(150vw) translateY(80em) rotate(-1620deg);
opacity:0;
}
}

@-webkit-keyframes fly1 {
from {

-webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg);
opacity:0;
}
}
@keyframes fly2 {
from {

transform:translateX(-150vw) translateY(80em) rotate(-1620deg);
opacity:0;
}
}

@-webkit-keyframes fly2 {
from {

-webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg);
opacity:0;
}
}
@keyframes fly3 {
from {
transform-origin:50% 50%;
transform: translateY(80em) rotate3d(0,100,0,540deg);
opacity:0;
}
}

@-webkit-keyframes fly3 {
from {
-webkit-transform-origin:50% 50%;
-webkit-transform:translateY(80em) rotate3d(0,100,0,540deg);
opacity:0;
}
}
</style>
</head>
<body>
<center>
<div class="card1" style=" -webkit-animation: fly1 1.5s 1s ease both;
animation: fly1 1.5s 1s ease both;
margin-left:20%; ">
<Strong>Left heading </Strong>
</div>
<div class="card">
<Strong>Newspaper Headline </Strong>
</div>
<div class="card1" style=" -webkit-animation: fly2 1.5s 1s ease both;
animation: fly2 1.5s 1s ease both;">
<Strong>Right heading</Strong>
</div>
<div class="card2">
News Article
</div>
</center>
</body>
</html>

Dream Of Code

Wednesday, 4 November 2015

The League of extraordinary newspapers (CSS)

No comments:

Post a Comment