Keyframes animation not running backwards - javascript

I'm creating an animation effect (decreasing the height slowly) as part of a keyframes animation. The animation plays forwards once, but doesn't play backwards and doesn't play on subsequent times.
JSFiddle here - http://jsfiddle.net/shaaraddalvi/eLwcw22e/
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation 1s backwards;
-moz-animation: someanimation 1s backwards;
-ms-animation: someanimation 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
Scroll through the page to get the desired effect. (Tested currently on chrome, isn't working that well on Edge).


You can achieve this by adding another keyframe animation like this:
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#-webkit-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-moz-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-ms-keyframes someanimation2 {
from: { padding: 10px 0px; }
to: { padding: 100px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation2 1s backwards;
-moz-animation: someanimation2 1s backwards;
-ms-animation: someanimation2 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
You can also check this Fiddle


You can achieve this without using animation. Hope this is the effect you want.
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#banner-container {
padding: 100px 0;
background-color: orange;
}
#banner-container {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
padding: 20px 0;
}
#banner-container.dynamic {
padding: 100px 0;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#banner-container.static + #buffer {
padding-top: 268px;
}
#banner-container.dynamic + #buffer {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
padding-top: 88px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>

Related

css preloader loads but not act as preloader. appears after footer

css based preloder is loads in the footer of page. not acting like preloader. seems code conflict or i missed some code. short clip of preloader https://www.awesomescreenshot.com/video/9880883?key=061bd162c59b4bcee2a76cd33f73cea3
// placed in head section of worpress
<div class="cssload-container">
<div class="cssload-item cssload-ventilator"></div>
</div>
//placed in body dection
<script>window.addEventListener("load", function () {
const cssload-container = document.querySelector(".cssload-container");
cssload-container.className += " hidden"; // class "cssload-container hidden"
}); </script>
plced in css section
.cssload-container {
position: relative;
width: 195px;
height: 224px;
overflow: hidden;
margin:0px auto;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 49px;
height: 49px;
background-color: rgb(1,1,44);
box-shadow: 0 0 8px 1px rgba(219,14,181,0.57);
}
.cssload-container .cssload-ventilator {
width: 24px;
height: 24px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: cssload-spin 1.3s ease-in-out infinite reverse;
-o-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-ms-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-webkit-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-moz-animation: cssload-spin 1.3s ease-in-out infinite reverse;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
}
.cssload-container .cssload-ventilator:before, .cssload-container .cssload-ventilator:after {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(219,14,181);
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-o-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-ms-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-webkit-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-moz-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
animation: cssload-shapeit 0.65s ease infinite alternate;
-o-animation: cssload-shapeit 0.65s ease infinite alternate;
-ms-animation: cssload-shapeit 0.65s ease infinite alternate;
-webkit-animation: cssload-shapeit 0.65s ease infinite alternate;
-moz-animation: cssload-shapeit 0.65s ease infinite alternate;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
content: '';
}
.cssload-container .cssload-ventilator:before {
left: -125%;
border-left: 2px solid rgb(1,1,44);
}
.cssload-container .cssload-ventilator:after {
right: -125%;
border-right: 2px solid rgb(1,1,44);
}
#keyframes cssload-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes cssload-spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes cssload-spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cssload-spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-o-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-ms-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-webkit-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-moz-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
.cssload-container.hidden {
animation: fadeOut .05s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
i am using divi theme in wordpress which allow to paste code in sections as commented.
kindly suggest the solution.

Vue js add animate for element when route page

I just want to animate specific element when route page load complete. its not route page transition. i have tried many ways. its a progress bar animate percentage of dynamicly from data value. i have tried mount destroyed method for change class but its not working.
my requirement is i want to pass value from data and according to the value, the progress bar shour be animate when page load.
enter image description here
<div class="media-body">
<div class="progress">
<div class="progress-bar progress-bar-warning" v-bind:class="{rating: isAnimate}">
</div>
</div>
</div>
.mybar {
height: 5px;
overflow: hidden;
background-color: #C1C2C1;
box-shadow: none;
}
.myactivebar {
background-color: #B01058;
float: left;
box-shadow: none;
transition: width 1s ease;
height: 100%;
width: 40%;
}
.rating {
width:100%;
}
data() {
return {
isAnimate: false,
technologies:[
{
title:'Vue Js',
info:'progressive framework for building user interfaces.',
logo:'https://vuejs.org/images/logo.png',
rate:90
},
]
}
}

This is actually what I want.
enter image description here
and I got the solution below
#-moz-keyframes animate-bar {
0% { width: 0%; }
}
#-webkit-keyframes animate-bar {
0% { width: 0%; }
}
#-ms-keyframes animate-bar {
0% { width: 0%; }
}
#-o-keyframes animate-bar {
0% { width: 0%; }
}
#-keyframes animate-bar {
0% { width: 0%; }
}
.chart {
background-color: #DADADA;
height: 2px;
position: relative;
}
.chart .bar {
background-color: #3D98C6;
height: 100%;
-moz-animation: animate-bar 1.25s 1 linear;
-webkit-animation: animate-bar 1.25s 1 linear;
-ms-animation: animate-bar 1.25s 1 linear;
-o-animation: animate-bar 1.25s 1 linear;
animation: animate-bar 1.25s 1 linear;
}
<div class="chart">
<div class="bar" style="width:60%;"></div>
</div>

Image slider got stuck after first button click

I got a question regarding an image slider that I am creating from scratch. I want to create it from scratch due to the fact that I do not need a lot of extra properties which I could get from using external sliders.
I have the following setup:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
$( "#slide-right" ).click(function() {
$(".hold-1").addClass('first');
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
What I am trying to achieve is that whenever I press the right button the margin got shifted towards the left. But I need some kind of mechanism to detect that. Have anyone an idea on how I could implement that? I do not ask for full code implementations. Any guidance is already very helpfull.
To be short: desired setup: being able to navigate through the images with the left and right button by shifting the margin towards left and right.
For a JSFIDDLE DEMO: JSFIDDLE

You are only adding the class first to your first holder.. (.hold-1). You can add an additional variable (counter) and add it the following way:
$(".hold-" + counter +"").addClass('first');
Have a look below:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;
$( "#slide-right" ).click(function() {
$(".hold-" + counter +"").addClass('first');
counter = counter + 1;
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Hope it helped

I've added/changed these lines of code:
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
What it does: It counts the amount of elements that has both class' image-holder & first. Then i adds 1, to get the value of the hold- class we want to add our class to
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
});
.col-slider {
position: relative;
z-index: 13;
margin-top: 0px;
width: 70%;
overflow: hidden;
height: 174px;
background-color: yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 15px;
float: left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2 {
font-family: Titillium Web;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
width: 85%;
text-align: center;
font-size: 36px;
}
.col-slider-buttons a {
margin-right: 10px;
display: inline-block;
margin-bottom: 30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</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;
}

modernizr CSS3 Animation fallback to swf

At the current time, i have a rather nice CSS3 animation, however i am required to provide a fallback option for browsers that do not support CSS3 animations (IE8 being the target)
I am required to use modernizr to make thinks easier, however i'm unsure of how to go about checking if the browser supports CSS animations, if it does, great, carry on, if not, display a flash version in the form of a swf instead.
CSS Below(Warning: theres alot!):
#animation
{
margin-left: auto;
margin-right: auto;
width: 700px;
height: 400px;
background:url('Images/Animation/SkyBG.png');
}
#rain
{
width: 700px;
height: 300px;
position: absolute;
background: url('Images/Animation/RainDrop.png');
-webkit-animation-name: rain;
-webkit-animation-duration: 7s;
-webkit-animation-delay: 9s;
opacity:0;
}
#-webkit-keyframes rain {
0% {background-position: 0px 0px; opacity:0;}
50%{opacity: 1;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}
#soil
{
width: 700px;
height: 150px;
background:url('Images/Animation/BGGround.png') no-repeat;
position: absolute;
top: 750px;
z-index: 5;
}
#items
{
width:700px;
height: 400px;
top:623px;
position: absolute;
}
#Seed1
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed.png');
background-repeat: no-repeat;
background-size: 25px 50px;
margin-left: 50px;
margin-top: 140px;
}
#Seed2
{
float:left;
width: 60px;
height: 110px;
background:url('Images/Animation/Seed2.png');
background-repeat: no-repeat;
background-size: 40px 55px;
margin-left: 50px;
margin-top: 140px;
}
#Seed3
{
float:left;
width: 60px;
height: 140px;
background:url('Images/Animation/Seed3.png');
background-repeat: no-repeat;
background-size: 65px 80px;
margin-left: 50px;
margin-top: 125px;
}
#Seed4
{
float:left;
width: 100px;
height: 170px;
background:url('Images/Animation/Seed4.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 50px;
}
#Seed5
{
float:left;
width: 100px;
height: 225px;
background:url('Images/Animation/Seed5.png');
background-repeat: no-repeat;
background-size: 125px 225px;
margin-left: 50px;
margin-top: 20px;
}
#sun {
width: 12.5px;
height: 12.5px;
border-radius: 50px;
background: red;
position: absolute;
-webkit-animation: rise 10s linear 3s 1 normal both;
-webkit-animation-delay: 21s;
-moz-animation: rise 10s linear 3s 1 normal both;
-ms-animation: rise 10s linear 3s 1 normal both;
-o-animation: rise 10s linear 3s 1 normal both;
animation: rise 10s linear 3s 1 normal both;
z-index: 0;
}
#-webkit-keyframes rise {
0% {
width: 12.5px;
height: 12.5px;
left: 0%;
top: 50%;
border-radius: 50px;
background-color: rgba(255,0,0,1);
box-shadow: 0px 0px 1px 1px rgba(255,255,0,1);
}
100% {
width: 25px;
height: 25px;
left: 80%;
top: -20%;
border-radius: 75px;
background-color: rgba(255,255,0,1);
box-shadow: 0px 0px 45px 45px rgba(255,255,0,0.7);
}
}
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes infoboxshow
{
0% {opacity:0;}
50%{opacity:1;}
}
#Seed1
{
-webkit-animation-name: show;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 5;
position:absolute;
opacity:0;
}
#infoBox1
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed2
{
z-index: 15;
position:absolute;
left: 125px;
opacity:0;
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox2
{
width: 400px;
height: 40px;
background:#f5cf26;
position: absolute;
bottom: 475px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align: center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 8s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed3
{
-webkit-animation-name: show;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 250px;
opacity:0;
}
#infoBox3
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 16s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed4
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 350px;
opacity:0;
}
#infoBox4
{
width: 400px;
height: 70px;
background:#f5cf26;
position: absolute;
bottom: 450px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 24s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#Seed5
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
z-index: 15;
position:absolute;
left: 500px;
opacity:0;
}
#infoBox5
{
width: 400px;
height: 100px;
background:#f5cf26;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
font-size: 24px;
text-align:center;
font-family: 'Lemon', cursive;
-webkit-animation-name: infoboxshow;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 31s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}

Modernizr would be easier. Just use Modernizr.cssanimations.
Exemplar:
<!-- ET CETERA -->
<head>
<!-- ET CETERA -->
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
if (!Modernizr.cssanimations) {
/* use jQuery to replace CSS3 animations with SWF
you may want to use JavaScript, but jQuery is just easy for me
*/
}
</script>
</head>
<!-- ... -->
For cleaner aspect, in the if statement, use jQuery to append the for a different stylesheet, e.g.:
$('head').append('<link rel="stylesheet" type="text/css" href="ie8-alternative.css">');

Categories

Resources