I am trying bouncing effect using css3 key-frame animation.
here is fiddle link: click
Background of box is changing but my requirement is to give bouncing effect to background image not background color.
What exactly I need: A bouncing(jumping) teddy on trampoline with two states:
(1. with arms up, 2. with arms down) while jumping.
Any ideas how to achieve it? Thank you!
I got solution for this:
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
#-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
#-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
#keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
#keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:2.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
height: 100px;
border-radius: 10px;
/*background: url(../img/pyonpyon.png) no-repeat;*/
background:red;
-webkit-animation-name: bounce1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce1;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
Fiddle example: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/
Thank you
Related
I'm trying to get the Top and Right values from an element being rotated by a CSS animation, for this I am using the following code:
HTML:
<div id="ball1"> </div>
CSS:
#keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#ball1 {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10;
height: 10;
border-radius: 10px;
}
Javascript:
console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);
console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);
However it returns a value of 0px, I wanted to get the value from Right and Top as if I was manually setting them (and not by the transform animation).
If this is not possible, is there a way to simulate a "circle" rotation and return the right/top values without using the transform?
ie:
https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0
Use getBoundingClientRect():
const ball = document.getElementById("ball");
setInterval(() => {
const rect = ball.getBoundingClientRect();
console.log(rect.top, rect.right);
}, 300);
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#ball {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
<div id="ball"></div>
Here is an approximation using top/left. The trick is to animate each property individually alternating the ease function to simulate the circular path:
.box {
width:100px;
height:100px;
position:relative;
}
#ball1 {
animation:
Atop 2.5s infinite,
Aleft 2.5s infinite;
position: absolute;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
#keyframes Atop {
0%,50%,100% {
top:50%;
animation-timing-function: ease-out;
}
25% {
top:0%;
animation-timing-function: ease-in;
}
75% {
top:100%;
animation-timing-function: ease-in;
}
}
#keyframes Aleft {
0%,100% {
left:0;
animation-timing-function: ease-in;
}
25%,75% {
left:50%;
animation-timing-function: ease-out;
}
50% {
left:100%;
animation-timing-function: ease-in;
}
}
<div class="box">
<div id="ball1"> </div>
</div>
My UX guy come up with a requirement to animate a text inside a text-box. i have this animation css class, when applied to a text-box animates the text-box. Thats how it should be.
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
i have created an example for reference
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
is is possible to animate only the text and not the text box itself. ??
Use CSS text-indent
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
text-indent: 8px;
}
33.3% {
text-indent: -6px;
}
49.95% {
text-indent: 4px;
}
66.6% {
text-indent: -2px;
}
83.25% {
text-indent: 1px;
}
100% {
text-indent: 0px;
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
Yes. Use padding-left instead of transform
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
padding-left: 10px;
}
33.3% {
padding-left: 5px;
}
49.95% {
padding-left: 8px;
}
66.6% {
padding-left: 3px;
}
83.25% {
padding-left: 5px;
}
100% {
padding-left: 0;
}
}
JSFiddle
As Santi mentions, you can fix the right side by using 'box-sizing: border-box'
Here is the page in question: http://alonzo.me/dev/pie/
And I am using the same basic markup that is shown here: https://phuu.net/2012/05/01/html-css-only-spinner.html
It is working great in every browser except safari for some reason.
I've been working on creating a css-only pie chart with #keyframe animations and setting animation-iteration-count to a decimal to run only a percentage of the animation. So I set a class for each percent (I'm not sure if there is a better way) like this:
.percent-1 .circle-fill,
.percent-1 .circle-fill-cover,
.percent-1 .circle-fill-cover-cover {
-webkit-animation-iteration-count: 0.01;
-moz-animation-iteration-count: 0.01;
-o-animation-iteration-count: 0.01;
animation-iteration-count: 0.01;
}
.percent-2 .circle-fill,
.percent-2 .circle-fill-cover,
.percent-2 .circle-fill-cover-cover {
-webkit-animation-iteration-count: 0.02;
-moz-animation-iteration-count: 0.02;
-o-animation-iteration-count: 0.02;
animation-iteration-count: 0.02;
}
...And so on from .percent-0 to .percent-100
Yeah, it's a lot of classes.
For some reason Safari is not rotating the elements how it should be. In the snippet below I linked to an external css file because there were just way too many styles for a code snippet.
Any help with this would be much appreciated! :)
$(document).ready(function(){
var percentageValue = $('#percentage-value');
var circleBG = $('.circle-background');
$('.jquery-area input[type="range"]').on("change mousemove", function() {
var newClass = "percent-"+$(this).val();
circleBG.attr('class', 'circle-background').addClass(newClass);
$('.jquery-area input[type="number"]').val($(this).val());
});
$('.jquery-area input[type="number"]').bind('keyup mouseup', function () {
var newClass = "percent-"+$(this).val();
circleBG.attr('class', 'circle-background').addClass(newClass);
$('.jquery-area input[type="range"]').val($(this).val());
});
});
.flex-center{
display: flex;
justify-content: center;
}
.jquery-area {
padding: 10px;
border: 1px solid #BBB;
position: relative;
margin-top: 50px;
}
.jquery-area input {
float: left;
}
.jquery-area p {
margin-top: 0;
margin-bottom: 0;
height: 22;
line-height: 22px;
display: inline-block;
background-color: white;
position: absolute;
top: -11px;
padding: 0 5px;
}
.jquery-area input[type="range"] {
height: 22px;
margin-right: 10px;
display: inline;
}
.jquery-area input[type="number"] {
height: 26px;
width: 40px;
padding-left: 3px;
}
.circle-background {
position: relative;
height: 100px;
width: 100px;
background: #06A;
border-radius: 100%;
-webkit-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
-moz-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
-o-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
overflow: hidden;
}
.circle-fill, .circle-fill-cover, .circle-fill-cover-cover {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: transparent;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.circle-fill {
border-top-color: #09F;
-webkit-animation: circle-fill-animation 2s linear;
-moz-animation: circle-fill-animation 2s linear;
-o-animation: circle-fill-animation 2s linear;
animation: circle-fill-animation 2s linear;
}
.circle-fill-cover {
content: "";
border-top-color: #06A;
-webkit-animation: circle-fill-cover-animation 2s linear;
-moz-animation: circle-fill-cover-animation 2s linear;
-o-animation: circle-fill-cover-animation 2s linear;
animation: circle-fill-cover-animation 2s linear;
}
.circle-fill-cover-cover {
content: "";
border-right-color: #09F;
opacity: 0;
-webkit-animation: circle-fill-cover-cover-animation 2s linear;
-moz-animation: circle-fill-cover-cover-animation 2s linear;
-o-animation: circle-fill-cover-cover-animation 2s linear;
animation: circle-fill-cover-cover-animation 2s linear;
}
/* This needs to go at the end */
.circle-fill, .circle-fill-cover, .circle-fill-cover-cover {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://alonzo.me/dev/pie/animation-percentages.css" rel="stylesheet"/>
<div class="flex-center">
<div class="circle-background percent-85">
<span class="circle-fill"></span>
<span class="circle-fill-cover"></span>
<span class="circle-fill-cover-cover"></span>
</div>
</div>
<div class="flex-center">
<div class="jquery-area">
<p>Percentage:</p>
<br>
<input type="range" name="points" min="0" max="100" value="85"><input type="number" min="0" max="100" step="1" value="85"/>
</div>
</div>
The console in the Chrome developer tools shows no errors, the div loads, but the animation play state remains paused - what am I doing wrong?
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation(){
"use strict";
document.getElementById("profile").classList.add("animation");
location.href = "#profile";
}
CSS
#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 30s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation { -webkit-animation-play-state: running; }
As you were assigning class once transition ends, the existing class css property that takes priority over.
You can make it override them using the !important keyword.
Fiddle here
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
#design {
position: relative;
-webkit-animation: design;
-webkit-animation-play-state: running;
-webkit-animation-duration: 3s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 3s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation {
-webkit-animation-play-state: running!important;
}
#-webkit-keyframes design {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
/* Profile: (Animation) */
#-webkit-keyframes profile {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
<div id="design">Design</div>
<div id="profile">profile</div>
Hi i am doing some animation effect using css3.It works fine in the browser.when i click button it runs only once in the webpage and i click again that button it remains same.if i want to play again,i need to refresh the page.i got some codes in the but its working.i dont know where i did mistake. this is my code kindly give some suggestions.
<script>
$('#button').click(function() {
var el = $('#div1').addClass('myfirst');
setTimeout(function() {
el.removeClass('myfirst');
}, 1000);
});
</script>
<style>
.center
{
width:960px;
height:500px;
float:left;
margin-left:100px;
margin-top:10px;
border:1px solid #ff0000;
}
.center1
{
width:780px;
height:500px;
float:left;
margin-left:80px;
margin-top:-500px;
border:1px solid #00ff00;
position:absolute;
}
.tfp{
width: 1000px;
height: 500px;
border-radius: 0%;
margin-left: -30px;
margin-top: 0px;
text-align: center;
background-image: url('tfp.jpg');
-webkit-animation-name: tfp-scale;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-name: tfp-scale;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
animation-name: tfp-scale;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes tfp-scale {
0% {
-webkit-transform: scale(2.5);
}
100% {
-webkit-transform: scale(0.8);
}
}
.div1 {
width: 100px;
height: 100px;
background: red;
float:left;
margin-left:200px;
margin-top:200px;
position: absolute;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {background:red; left:0px; top:-100px; opacity:0;}
to {background:red; left:-90px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst {
from {background:red; left:0px; top:-100px;}
to {background:red; left:-90px; top:-180px;}
}
.div2
{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
float:left;
margin-left:600px;
margin-top:200px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst1 {
from {background:yellow; left:100px; top:0px;opacity:0;}
to {background:yellow; left:370px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst1 {
from {background:yellow; left:100px; top:0px; }
to {background:yellow; left:370px; top:-180px; }
}
.div3
{
width: 100px;
height: 100px;
background: green;
position: absolute;
float:left;
margin-left:0px;
margin-top:350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst2;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst2 {
from {background:green; left:450px; top:0px; opacity:0;}
to {background:green; left:110px; top:70px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst2 {
from {background:green; left:0px; top:0px;}
to {background:green; left:300px; top:-200px;}
}
.div4
{
width: 100px;
height: 100px;
background: orange;
position: relative;
float:left;
margin-left:600px;
margin-top:-350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst3;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst3 {
from {background:orange; left:0px; top:0px; opacity:0;}
to {background:orange; left:260px; top:250px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst3 {
from {background:orange; left:0px; top:0px;}
to {background:orange; left:0px; top:200px;}
}
</style>
<body>
<div class="center">
<div class="tfp">
</div>
<div class="center1"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<button id="button">play</button>
</body>
"myfirst" is not the class name, it's the animation name.
with "#div1" you're searching for the id "div1", but your elements class name is "div1" (select it with a dot: $('.div1')).
You have to execute your javascript after the dom is loaded. Currently you're searching for the id "button" before the element is loaded.
You're using jquery, so you can execute your code inside $(function(){ /* here */ }); or just move the script to the bottom.
here the animation part (Demo: http://jsfiddle.net/FirePanther/q4bedpdz/):
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<style>
.div {
width: 100px;
height: 100px;
background: red;
margin-left: 200px;
margin-top: 200px;
position: absolute;
opacity: 0;
}
.myfirst {
/* Chrome, Safari, Opera */
-webkit-animation: myfirst 1s linear;
/* Standard syntax */
animation: myfirst 1s linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {
background: red;
left: 0px;
top: -100px;
opacity: 0;
}
to {
background: red;
left: -90px;
top: -180px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes myfirst {
from {
background: red;
left: 0px;
top: -100px;
opacity: 0;
}
to {
background: red;
left: -90px;
top: -180px;
opacity: 1;
}
}
</style>
</head>
<body>
<div class="div"></div>
<button id="button">play</button>
<script>
$('#button').click(function() {
var el = $('.div').addClass('myfirst');
setTimeout(function() {
el.removeClass('myfirst');
}, 1000);
});
</script>
</body>
edit:
without the opacity transition and without hiding the element after the animation: http://jsfiddle.net/FirePanther/L2pf5wku/1
If u need the animation to be infinite loop, the animation iteration count should be infinite.
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
Try this CSS
.center
{
width:960px;
height:500px;
float:left;
margin-left:100px;
margin-top:10px;
border:1px solid #ff0000;
}
.center1
{
width:780px;
height:500px;
float:left;
margin-left:80px;
margin-top:-500px;
border:1px solid #00ff00;
position:absolute;
}
.tfp{
width: 1000px;
height: 500px;
border-radius: 0%;
margin-left: -30px;
margin-top: 0px;
text-align: center;
background-image: url('tfp.jpg');
-webkit-animation-name: tfp-scale;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-name: tfp-scale;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
animation-name: tfp-scale;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes tfp-scale {
0% {
-webkit-transform: scale(2.5);
}
100% {
-webkit-transform: scale(0.8);
}
}
.div1 {
width: 100px;
height: 100px;
background: red;
float:left;
margin-left:200px;
margin-top:200px;
position: absolute;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {background:red; left:0px; top:-100px; opacity:0;}
to {background:red; left:-90px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst {
from {background:red; left:0px; top:-100px;}
to {background:red; left:-90px; top:-180px;}
}
.div2
{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
float:left;
margin-left:600px;
margin-top:200px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst1 {
from {background:yellow; left:100px; top:0px;opacity:0;}
to {background:yellow; left:370px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst1 {
from {background:yellow; left:100px; top:0px; }
to {background:yellow; left:370px; top:-180px; }
}
.div3
{
width: 100px;
height: 100px;
background: green;
position: absolute;
float:left;
margin-left:0px;
margin-top:350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst2;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst2 {
from {background:green; left:450px; top:0px; opacity:0;}
to {background:green; left:110px; top:70px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst2 {
from {background:green; left:0px; top:0px;}
to {background:green; left:300px; top:-200px;}
}
.div4
{
width: 100px;
height: 100px;
background: orange;
position: relative;
float:left;
margin-left:600px;
margin-top:-350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst3;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst3 {
from {background:orange; left:0px; top:0px; opacity:0;}
to {background:orange; left:260px; top:250px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst3 {
from {background:orange; left:0px; top:0px;}
to {background:orange; left:0px; top:200px;}
}