Develop Reference

Changes to the element's text breaks it's parent delegated event handlers

I'm working on a drop down menu as part of a school project. I've gotten most everything to work properly but I ran into an issue with JQuery events that I couldn't quite find the answer to, whenever I click on my list item it sets the list name properly but after that none of the events work. I put the handlers on parent elements to see if that helped but still nothing.
Here's a quick look at the JQuery.
$(document).ready(function(){
$('nav ul').on('mouseenter', '.menu1', function(){
$('.menu1 ul').removeClass("hidden");
});
$('nav ul').on('mouseleave', '.menu1', function(){
setTimeout(function(){
$('.menu1 ul').addClass("hidden");
}, 300);
});
$('nav ul').on('click', '.menu1 ul li', function(){
$('.menu1').text($(this).text());
});
});
I have a code pen for the list as well.
https://codepen.io/JFarenci/pen/gvoQvq

The issue is in $('.menu1').text($(this).text());
After this line gets executed on choosing an option, the portion inside the li tag changes to this: <li class="menu1">one</li> (assuming you had chosen 'one'). The ul tag along with the dropdown menu is overwritten.
To fix this, have a separate space to display the selected option above the li tag.
HTML:
<p id="selected"></p>
JAVASCRIPT:
$('nav ul').on('click', '.menu1 ul li',function({
$('#selected').text($(this).text());
});
Hope this helps!

I removed your mouseenter and mouseleave events and replaced it with mouseover.
On each click I added a span containing $(this).text(). Note that it's preceded by a remove() to handle for prior clicks when the text was set.
See runnable snippet to test.
$(document).ready(function() {
$('nav ul').on('mouseover', '.menu1', function() {
setTimeout(function() {
$('.menu1 ul').show();
}, 300);
});
$('nav ul').on('click', '.menu1 ul li', function() {
$('.menu1').find("#click").remove();
$('.menu1').append('<span id="click">' + $(this).text() + '<span>');
});
});
nav {
padding: 50px;
text-align: center;
}
nav>ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
background: #ddd;
border-radius: 5px;
}
nav>ul>li {
float: left;
width: 150px;
height: 65px;
line-height: 65px;
position: relative;
text-transform: uppercase;
font-size: 14px;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
nav>ul>li:hover {
background: #d5d5d5;
border-radius: 5px;
}
ul.dropMenu {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
padding: 0;
}
ul.dropMenu li {
background: #666;
color: rgba(255, 255, 255, 0.7);
}
ul.dropMenu li:hover {
background: #606060;
}
ul.dropMenu li:last-child {
border-radius: 0px 0px 5px 5px;
}
.hidden {
display: none;
/*opacity: 0;*/
}
li:hover>ul.dropMenu {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover>ul.dropMenu li {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
}
li:hover>ul.dropMenu li:nth-child(1) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(2) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 60ms;
animation-delay: 60ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(3) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(4) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fold-out {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
60% {
-webkit-transform: rotateX(15deg);
transform: rotateX(15deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
}
#keyframes fold-out {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
60% {
-webkit-transform: rotateX(15deg);
transform: rotateX(15deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
}
li>ul.dropMenu {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li>ul.dropMenu li {
-webkit-transform-origin: top center;
transform-origin: top center;
}
li>ul.dropMenu li:nth-child(4) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(3) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 60ms;
animation-delay: 60ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(2) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(1) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fold-in {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
}
#keyframes fold-in {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li class="menu1">
<ul class="dropMenu hidden">
<li>one</li>
<li>two</li>
<li>three</li>
<li>fork</li>
</ul>
</li>
</ul>
</nav>

Css fade-out logo fade-in background page

I'm trying to use the fade-out property on a home page to the #logo and at the same time fade-in to .container (whole page) . So while the logo is fadding out, the main page it's fadding in. I'm trying with some code that I found but no success. Does anyone know some proper documentation for reach it? THANKS
<div class="container">
<div id="logo" class="animated fadeOut"></div>
</div>
.animated {
z-index: 0;
background-image: url(../../static/logo.svg);
background-repeat: no-repeat;
background-position: center;
padding-top: 95px;
margin-bottom: 60px; -webkit-animation-duration: 5s;
animation-duration: 5s; -webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
# - webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}

This should work. HTML:
<div class="animated fadeIn container">
<div id="logo" class="logo animated fadeOut"></div>
</div>
CSS:
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.logo {
z-index: 0;
background-image: url(../../static/logo.svg);
background-repeat: no-repeat;
background-position: center;
padding-top: 95px;
margin-bottom: 60px;
}
.animated{
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.fadeIn {
-webkit-animation-name: fadeOut;
animation-name: fadeIn;
-webkit-animation-direction: reverse; //reverse direction of animation
animation-direction: reverse;
}

Adding text to fading in and fading out images

I want to add text to the images that are fading in and fading out. And I want the text to fade in and out with the concerned image. Any Idea how can this be done? Thanks in advance! I have given the code below:
<html>
<div id="fadeslide">
<img src="9.jpg" class="is-showing"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
</div>
</html>
<script>
function slideShow() {
var showing = $('#fadeslide .is-showing');
var next = showing.next().length ? showing.next():
showing.parent().children(':first');
showing.fadeOut(1000, function() {
next.fadeIn(1000).addClass('is-showing');
}).removeClass('is-showing');
setTimeout(slideShow, 5500);
}
$(document).ready(function() {
slideShow();
});
</script>
#fadeslide {
width: 960px;
height: 640px;
margin: 0px auto 0px auto;
overflow: hidden;
}
#fadeslide img {
display: none;
}
#fadeslide .is-showing {
display: inline;
}

Try this:-
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div id="cf">
<img class="bottom" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />
<img class="top" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" />
</div>
Ok try it
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.letter {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
#-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
#keyframes fade {
50% {
opacity: 0.02;
}
}
<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>
or this
.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
.fadebutton:hover {
background-image:url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}
<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>

CSS3 Looping after last frame animation is done in sequence of animations

I currently have 5 frames - each frame consist of a total of 3 animations that by time gradually fade up the next frame.
My issue: How can I loop the animation after having finished the last sequence of animation? (in the example that would be #frame2)
I don't mind using javascript to possibly detect and "force" the loop.
Fiddle here: http://jsfiddle.net/a0cpo5xe/1/ - My setup looks as so (just imagine it with 5 frames):
#frame1 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:0.8s;
}
#picture-1 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#picture-1 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#frame2 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:4.3s;
}
#picture-2 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
#picture-2 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
/* FADES */
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}

You can listen for the animationend event using JavaScript to determine if the animation ended.
animationend
The animationend event is fired when a CSS animation has completed.
Here is an example repeating your css animation from your jsfiddle three times by cloning your elements, removing them and at the end of the animation adding them back to the DOM.
I'm sure you will get the idea.
var i = 1;
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement"),
animations = {
"animation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
};
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
function init() {
var animationEvent = whichAnimationEvent(),
wrp = document.getElementById('wrapper'),
frm2 = document.getElementById('frame2'),
cln = wrp.cloneNode(true);
function animationEnd(evt) {
i++;
//console.log(evt);
wrp.parentNode.removeChild(wrp);
document.body.appendChild(cln);
if (i !== 3) {
init();
}
}
frm2.addEventListener(animationEvent, animationEnd);
}
init();
#wrapper {
text-align: center;
color: #ffffff;
}
#frames {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* hide */
}
#pictures {
position: absolute;
top: 0;
}
.picture {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
opacity: 0; /* hide */
}
/* ANIMATION START */
#frame1 {
background-color: green;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.8s;
animation-delay:0.8s;
}
#picture-1 .picture {
background-color: #116343;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.5s;
animation-delay:0.5s;
}
#frame2 {
background-color: blue;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:4s;
animation-delay:4s;
}
#picture-2 .picture {
background-color: #3d1163;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:3.7s;
animation-delay:3.7s;
}
/* FADES */
#-webkit-keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
<div id="wrapper">
<div id="frames">
<div id="frame1" class="frame">frame 1</div>
<div id="frame2" class="frame">frame 2</div>
</div>
<div id="pictures">
<div id="picture-1">
<div class="picture">pic 1</div>
</div>
<div id="picture-2">
<div class="picture">pic 2</div>
</div>
</div>
</div>

Looking to achieve rectangle radial wipe animation reveal

I'm working on a full-width hero animation that would reveal an image/HTML div in a radial wipe manner. Here's what I have thus far: http://jsfiddle.net/andrewkerr/bjqSv/ - (code below) which is largely based these pieces:http://codepen.io/tmyg/pen/bwLom and http://css-tricks.com/css-pie-timer/ - The issue I'm running into is the fact that the image tiles because the animation splits the "pie" in half - I'm looking to perform the effect without having the image tile. I'm not opposed to a Javascript solution. Thanks.
//html
<div class="spinner-new">
<span><em></em></span>
<span><em></em></span>
</div>
//css
.spinner-new {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
background:#3f9e35;
overflow:hidden
}
.spinner-new span em {
background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg');
-webkit-animation-delay:1s;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner-new {
position: relative;
}
.spinner-new span {
width: 50%;
height: 400%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
left: 0;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spinner-new span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 12.5%;
}
.spinner-new span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 12.5%;
}

That is my solution.
CSS
#-webkit-keyframes span-left {
0% { right: 0%; }
24.999% { right: 0%;}
25% { right: 50%;}
100% { right: 50%;}
}
#-webkit-keyframes rotate-first {
0% { right: 100%;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: right center; }
24.999% { right: 100%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
25% { right: 0%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
50% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
100% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
}
#-webkit-keyframes rotate-last {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
24.999% { -webkit-transform: rotate(180deg); opacity: 0;}
25% { -webkit-transform: rotate(180deg); opacity: 1;}
50% { -webkit-transform: rotate(360deg); opacity: 1; }
100% { -webkit-transform: rotate(360deg); opacity: 1;}
}
.spinner-new {
width: 400px;
height: 300px;
position: relative;
overflow:hidden;
position: relative;
left: 50px;
top: 20px;
}
.spinner-new span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
right: 50%;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
}
.spinner-new span em,
.spinner-new span:first-child {
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner-new span:first-child {
-webkit-animation-name: span-left;
}
.spinner-new span:first-child em {
-webkit-animation-name: rotate-first;
overflow: hidden;
}
.spinner-new span:last-child em {
left: 0;
-webkit-animation-name: rotate-last;
-webkit-transform-origin: left center;
-webkit-transform: rotate(204deg);
}
.spinner-new span em:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0px;
background-image:url('image.jpg');
background-size: cover;
}
.spinner-new span:first-child em:after {
left: 0px;
}
.spinner-new span:last-child em:after {
right: 0px;
}
The most complex issue is reusing the splitted left element for the right hand beginning.
I have to move the container to the left in the middle of the animation.
The background image is set with cover, and all the size are in percentages, so this solution should be fully responsive
fiddle
The demo has the iteration count to infinite, so it is easier to see it going on.

May not be the most elegant way to accomplish this, but I ended up using CSS animations to reveal pie pieces gradually. Here's a link to the working example: http://jsfiddle.net/andrewkerr/dsTm6/ - code below
//html
<div class="wrapper">
<div class="headline">Some really cool supporting text</div>
<div class='shutter-1 first' style="left:400px;top:0px;"></div>
<div class='shutter-2 fourth' style="left:400px;top:400px;"></div>
<div class='shutter-1a third' style="left:400px;top:400px;"></div>
<div class='shutter-3 seventh' style="left:0px;top:0px"></div>
<div class='shutter second' style="left:400px;top:0px;"></div>
<div class='shutter-2a sixth' style="left:0px;top:400px;"></div>
<div class='shutter fifth' style="left:0px;top:400px;"></div>
<div class='shutter-3a eighth' style="left:0px;top:0px"></div>
</div>
//css
.wrapper {
position:relative;
background-image:url('main.jpg');
width:800px;
height:800px;
margin:0px auto;
}
.shutter
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-top;150px solid transparent;
border-left: 400px solid #e7e7e7;
text-indent: -9999px;
border-top-width: 400px;
border-top-style: solid;
border-top-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
#keyframes first
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-moz-keyframes first /* Firefox */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-webkit-keyframes first /* Safari and Chrome */
{
from {opacity: 1.0 ;}
to {opacity: 0.0;}
}
#-o-keyframes first /* Opera */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.first
{
animation: first 1s;
animation-delay: .08s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: .08s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .08s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: .08s;
-o-animation-fill-mode: forwards;
}
.second
{
animation: first 1s;
animation-delay: 1.0s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards;
}
.third
{
animation: first 1s;
animation-delay: 1.05s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.05s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.05s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.05s;
-o-animation-fill-mode: forwards;
}
.fourth
{
animation: first 1s;
animation-delay: 1.2s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.2s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay:1.2s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.2s;
-o-animation-fill-mode: forwards;
}
.fifth
{
animation: first 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.4s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.4s;
-o-animation-fill-mode: forwards;
}
.sixth
{
animation: first 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.5s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.5s;
-o-animation-fill-mode: forwards;
}
.seventh
{
animation: first 1s;
animation-delay: 1.6s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.6s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.6s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.6s;
-o-animation-fill-mode: forwards;
}
.eighth
{
animation: first 2s;
animation-delay: 1.7s;
animation-fill-mode: forwards;
-moz-animation: first 2s; /* Firefox */
-moz-animation-delay: 1.7s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.7s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 2s; /* Opera */
-o-animation-delay: 1.7s;
-o-animation-fill-mode: forwards;
}
.headline {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size:36px;
text-align: center;
color:#fff;
padding-top:300px;
width:300px;
margin: 0 auto;
}