.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
}
<span class="blink_me">This Will Blink</span>
I added -webkit-animation-delay: 2s; but the delay triggered at the beginning not at between, how can I make delay happens in between so that the blinking speed is slower?
You can just extend the time and make the animation run faster by making it finish before 100%. You get the idea, so just work out the timing you want.
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
25% {
opacity: 0.0;
}
50% {
opacity: 1.0;
}
}
<span class="blink_me">This Will Blink</span>
try adjusting the animation loop like this:
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
25% { opacity: 1.0; }
50% { opacity: 0.0; }
75% { opacity: 0.0; }
100% { opacity: 1.0; }
}
}
<span class="blink_me">This Will Blink</span>
Related
This question already has answers here:
Repeat animation every 3 seconds
(2 answers)
Closed 7 years ago.
How to implement the code below to my animation, my animation is in infinite loop i want after each animation it will pause for 10 sec then start again, im using animate.css
note: i pasted the keyframe below
setTimeout(function() {
// 1000 == 1 seconds
// modify dom elements here
// your code here
}, 1000);
HTML + CSS code of it
<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>
.motext {
animation-duration: 20s;
animation-delay: 19s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
width:90%;
max-width:1170px;
margin:auto;
text-align:right;
position:relative;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
Have not tried animate.css , though should be possible using existing css, by adjusting animation-delay to 10s , animation-direction to alternate , animation-fill-mode to forwards
.motext {
animation-name: x;
animation-duration: 20s;
animation-delay: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: alternate;
animation-fill-mode: forwards;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
width: 90%;
max-width: 1170px;
margin: auto;
text-align: right;
position: relative;
color: blue;
}
#keyframes x {
0% {
color: blue;
}
100% {
color: red;
}
}
<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>
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>
My Goal:
I want to fade each Image out of a folder. The Images change every once in a while. Is that even possible due to security reasons? The Site where the Images are displayed isnt public. It is just for a Xibo Digital Signage
What I got so far:
Here is the JSFiddle
HTML:
<div id="cf4a" class="shadow">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
CSS:
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
A very simple solution could be to refresh the page every so often to pull the new images.
JS:
setTimeout(function(){
window.location.reload(1);
}, 5000);
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;}
}
In every flexslider list I have a div which is named class="txt",
and so I need to animate this txt class in every flexslider's list example :
<div class='flexslider'>
<ul>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
</ul>
</div>
But only the first class="txt" in list of flexslider is animating by css below, others in list whenever I click next are not getting the animation, what should i do ?
Here is the animation code I'm using for txt class :
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
#-webkit-keyframes aniload {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}
You can delay your other animations http://jsfiddle.net/o3yftL2o/2/
.txt_a{
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
-webkit-animation-delay:1s;
}
#-webkit-keyframes aniload {
0% {-webkit-transform:translate(0px, 1000px)}
100% {-webkit-transform:translate(0px, 0px)}
}
.txt_b{
-webkit-animation: aniload2 1s;
-moz-animation: aniload2 1s;
-ms-animation: aniload2 1s;
-o-animation: aniload2 1s;
animation: aniload2 1s;
-webkit-animation-delay:.5s;
}
#-webkit-keyframes aniload2 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}
.txt_c{
-webkit-animation: aniload3 1s;
-moz-animation: aniload3 1s;
-ms-animation: aniload3 1s;
-o-animation: aniload3 1s;
animation: aniload3 1s;
-webkit-animation-delay:0s;
}
#-webkit-keyframes aniload3 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}