I am trying to add css if user is in certain section, however I am not able to achieve it. The css is this(it animates my bars):
.swift { width:70%; -moz-animation:swift 2s ease-out; -webkit-animation:swift 2s ease-out; }
.java { width:50%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
.python { width:60%; -moz-animation:python 2s ease-out; -webkit-animation:python 2s ease-out; }
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; }
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
#-moz-keyframes swift { 0% { width:0px;} }
#-moz-keyframes java { 0% { width:0px;} }
#-moz-keyframes python { 0% { width:0px;} }
#-moz-keyframes backend { 0% { width:0px;} }
#-moz-keyframes html5 { 0% { width:0px;} }
#-moz-keyframes css3 { 0% { width:0px;} }
#-webkit-keyframes swift { 0% { width:0px;} }
#-webkit-keyframes java { 0% { width:0px;} }
#-webkit-keyframes python { 0% { width:0px;} }
#-webkit-keyframes backend { 0% { width:0px;} }
#-webkit-keyframes html5 { 0% { width:0px;} }
#-webkit-keyframes css3 { 0% { width:0px;} }
And this is the way, I detect if user is in the certain section:
$(function(){
$(window).bind('scroll', function() {
$('#skill-section').each(function() {
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 0) {
post.addClass('stye', ''); // I tried to add the css here, but it didn't work
}
}
});
});
});
I want those blue bars to go from left to right only if user is in certain section. Because right now it does it on page load and user may not see it.
You have an extra }); at the end of the script and missing an ) for the each() method on the end. Also, you can't use each on an id, you should use a class instead, ids have to be unique. See the working snippet below:
$(function() {
$(window).bind('scroll', function() {
$('.skill-section').each(function() { //added class instead of id
var post = $(this);
var position = post.position().top - $(window).scrollTop();
if (position <= 0) {
post.addClass('stye');
}
});// added the missing ")" here
});
});
//removed the extra "});" from here
.swift { width:70%; -moz-animation:swift 2s ease-out; -webkit-animation:swift 2s ease-out; }
.java { width:50%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
.python { width:60%; -moz-animation:python 2s ease-out; -webkit-animation:python 2s ease-out; }
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; }
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
#-moz-keyframes swift { 0% { width:0px;} }
#-moz-keyframes java { 0% { width:0px;} }
#-moz-keyframes python { 0% { width:0px;} }
#-moz-keyframes backend { 0% { width:0px;} }
#-moz-keyframes html5 { 0% { width:0px;} }
#-moz-keyframes css3 { 0% { width:0px;} }
#-webkit-keyframes swift { 0% { width:0px;} }
#-webkit-keyframes java { 0% { width:0px;} }
#-webkit-keyframes python { 0% { width:0px;} }
#-webkit-keyframes backend { 0% { width:0px;} }
#-webkit-keyframes html5 { 0% { width:0px;} }
#-webkit-keyframes css3 { 0% { width:0px;} }
.skill-section{
background: #adadad;
width: 100px;
height: 600px;
}
.stye{
background: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill-section'></div>
<div class='skill-section'></div>
<div class='skill-section'></div>
Related
my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle
I'm trying to implement a CSS typing indicator in Vue. Without Vue, it looks like this:
.typing-indicator {
background-color: #E6E7ED;
width: auto;
border-radius: 50px;
padding: 20px;
display: table;
margin: 0 auto;
position: relative;
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator:before, .typing-indicator:after {
content: '';
position: absolute;
bottom: -2px;
left: -2px;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #E6E7ED;
}
.typing-indicator:after {
height: 10px;
width: 10px;
left: -10px;
bottom: -10px;
}
.typing-indicator span {
height: 15px;
width: 15px;
float: left;
margin: 0 1px;
background-color: #9E9EA1;
display: block;
border-radius: 50%;
opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
#-webkit-keyframes blink {
50% {
opacity: 1;
}
}
#keyframes blink {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
<div class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
– source: http://jsfiddle.net/Arlina/gtttgo93/
The problem is that the animation does not work when adding the scoped attribute to the component's style definition (<style lang="scss" scoped>). I believe it may be related to keyframes that should be declared globally.
The element with .typing-indicator is in the template of the component with scoped styling.
Does anyone have an idea of how I can allow my component to have scoped styling while making the keyframe animations work?
Problem
The problem is down to how the Webpack loader for Vue (vue-loader), incorrectly, parses animation names when adding IDs to scoped selectors and other identifiers. This is important because vue-loader's CSS scoping uses unique attributes added to elements to replicate the behaviour of CSS scoping. While your keyframe names get IDs appended, references to keyframes in animation rules in scoped styles do not.
Your CSS:
#-webkit-keyframes blink {
50% {
opacity: 1;
}
}
#keyframes blink {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
Should get transformed to:
#-webkit-keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
}
However it only get's transformed to:
#-webkit-keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
Something to note: in the actual transformation, references to keyframe names in animation rules are missing the -data-v-xxxxxxxx at the end. This is the bug.
Currently (as of 47c3317) the animation name in shorthand animation rule declarations is identified by getting the first value out of splitting the animation rule by any whitespace character[1]. However the formal definition for the animation property states the animation name could appear anywhere within the rule definition.
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
– animation formal syntax[2]
Therefore, while your animation declarations are valid, vue-loader is not able to parse it.
Workaround
The current workaround for this is to move your animation names to the beginning of animation rule declarations. Your keyframe declarations do not need changing, they remain inside the scoped stylesheet. Your animation declarations should now look like this:
.typing-indicator {
...
-webkit-animation: bulge 2s infinite ease-out;
animation: bulge 2s infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: blink 1s infinite 0.3333s;
animation: blink 1s infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: blink 1s infinite 0.6666s;
animation: blink 1s infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: blink 1s infinite 0.9999s;
animation: blink 1s infinite 0.9999s;
}
References
[1] vue-loader/lib/style-compiler/plugins/scope-id.js#L67 # 47c3317
[2] Definition for animation in the Editor's Draft of W3C specification CSS Animations Level 1
I met the same problem and the first answer did tell me why it does not work, but the workaround part did not quite fix my issue... this is my code:
/* Animations */
#keyframes moveOut1 {
from {
transform: translateY(0) scale(0);
}
3% {
transform: translateY(0.2em) scale(1);
}
97% {
transform: translateY(7.3em) scale(1);
}
to {
transform: translateY(7.5em) scale(0);
}
}
#keyframes moveOut2 {
from {
transform: rotate(60deg) translateY(0) scale(0);
}
3% {
transform: rotate(60deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(60deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(60deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut3 {
from {
transform: rotate(120deg) translateY(0) scale(0);
}
3% {
transform: rotate(120deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(120deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(120deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut4 {
from {
transform: rotate(180deg) translateY(0) scale(0);
}
3% {
transform: rotate(180deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(180deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(180deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut5 {
from {
transform: rotate(240deg) translateY(0) scale(0);
}
3% {
transform: rotate(240deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(240deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(240deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut6 {
from {
transform: rotate(300deg) translateY(0) scale(0);
}
3% {
transform: rotate(300deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(300deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(300deg) translateY(7.5em) scale(0);
}
}
#keyframes ripple {
from,
to {
width: 0.2em;
}
33% {
width: 2.4em;
}
}
so I asked a friend and the solution he provided me with is simply to place the css code out side and then import it into the vue component via
<style>
#import url(./{css_file_name}.css);
</style>
but I do not understand the mechanism behind this... but to me, it's fine as long as it works.
I have created multilevel navigation menu using jquery dlmenu plugin v1.0.2 demo2.
Everything works fine, except CSS3 menu navigation is not smooth as jQuery left/right slide functionality is.
Is there any solution to resolve this issue without changing plugin?
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimOut2 0.3s ease-in-out forwards;
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimOut2 {
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
#-moz-keyframes MenuAnimOut2 {
100% {
-moz-transform: translateX(-100%);
opacity: 0;
}
}
#keyframes MenuAnimOut2 {
100% {
transform: translateX(-100%);
opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimIn2 0.3s ease-in-out forwards;
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
#-moz-keyframes MenuAnimIn2 {
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
#keyframes MenuAnimIn2 {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
You have to use the plugin like this : with animationClasses "in" and "out" not "classin" and "classout"
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
});
});
I want to have this effect, but not on the whole body background but just on the border of one of my div's. ( http://jsfiddle.net/ANMPt/ )
#-webkit-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-moz-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-ms-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
How do I target just the border?
Or: if anyone has a better solution to get an infinite loop of changing border colors in CSS or JavaScript: i am all ears :-)
Thanks!
You are applying it to the body! Do it for div
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/160/
But, if you say it is for border, do it for border-color not for background!
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/167/
Animate border-color instead of background:
#keyframes blink {
0% { border-color: red; }
50% { border-color: green;}
100% { border-color: red; }
}
body {
border: 15px solid;
animation: blink 1s infinite;
}
Some browsers may need vendor prefixes
Demo
http://jsfiddle.net/ANMPt/162/
Change it to border-color.
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 20px solid red; /* cant animate border without a border... */
height: 200px; / * for illustration purpose */
}
Apply it to the right property (border-color instead of background) and to the right element (it's better to use a class selector, so the effect can be applied to any element instead that only to divs).
Also don't forget to use (always as last) the default #keyframe syntax other than the prefixed ones.
Demo
HTML
<div class="animatedBorder"></div>
CSS
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
.animatedBorder{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
div.animatedBorder{
margin: 20px;
width: 100px;
height: 100px;
border: 5px solid transparent;
}
The FIX is Animating border-color instead of background
But if you need to add this effect to a div
simply add a divinside the body
then change the background in css to border-color property
DEMO
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:2px solid;
width:200px;
height:200px;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:solid 1px red;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Replace all occurrences of background with border-color and then use them on your div-element instead of the body.
You probably have to define a border for the div first (like #000000 1px solid) in order to animate it.
http://jsfiddle.net/ANMPt/165/
You need to change the style for the animation definitions:
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
And define a border for your div:
#myDiv{
height: 300px;
width:300px;
border-width:5px;
border-style:solid;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
How might I do this? I'm trying to use css3 only for performance reasons (fade in can get kind of choppy).
Right now they all happen at the same time.
function fadeInPlaylist(elem) {
elem.css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i) {
setTimeout(fadeInPlaylist($(this)),2500*i);
});
});
You are calling setTimeout incorrectly.
setTimeout(fadeInPlaylist($(this)),2500*i);
should be:
setTimeout(function(){fadeInPlaylist($(this));},2500*i);
Also, here's a working fiddle: http://jsfiddle.net/q7Wa8/
If you really need to do it with CSS3 only, use this code:
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
}
But you'll have compatibility issues.
Here's the cross-browser code, doesn't work in IE:
#keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-webkit-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-moz-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-moz-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-o-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0, 0;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 0, 0;
-o-animation-name: reset, fade-in;
-o-animation-duration: 2.5s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
-o-animation-delay: 0, 0;
}
You could use fadeTo with delay but if you want to do it your way try this:
function fadeInPlaylist() {
$(this).css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i, e) {
setTimeout(function(){ fadeInPlaylist.call(e); }, 1000 * i);
});
});
Demo: http://jsbin.com/oyazof/1/edit
Edit:
If you want to do it with CSS3 transitions you can just add a class instead of changing the css from jQuery.
jQuery:
function fadeInPlaylist() {
$(this).addClass('opacity');
}
CSS:
.opacity {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity: 1;
}
Demo with CSS3 transitions: http://jsbin.com/oyazof/3/edit
Just change:
elem.css('opacity',1);
To:
elem.fadeTo('fast', 1);