Develop Reference

Different animation durations for the same CSS animation

I'm trying to have multiple divs with text that all use the same CSS animation- (blinking), but they should all blink at different rates. Let's say I want the first div to blink once every 2 seconds and the second div to blink once every 4 seconds.
Is there any way to do this?
Here is my code:
.blink {
animation-duration: 2s;
/*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0.1;
}
100% {
opacity: 0.1
}
}
<div class="blink">hello</div>
<div class="blink">explosion</div>

by using :first-child and :last-child you can control animation-duration for each of them
.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0.1;
}
100% {
opacity: 0.1
}
}
Demo
or the same
.blink{
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0.1;
}
100% {
opacity: 0.1
}
}
Demo
while you said (multiple divs) you can use :nth-child(n) for divs like
.blink:nth-child(1) { // for first div
.blink:nth-child(2) { // for second div
.... so on

One way to do this is to split the duration into its own class, and use multiple classes in HTML (with .blink as the main class):
.blink {
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink-1s {
animation-duration: 1s;
}
.blink-2s {
animation-duration: 2s;
}
.blink-3s {
animation-duration: 3s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0.1;
}
100% {
opacity: 0.1
}
}
<div class="blink blink-1s">one second</div>
<div class="blink blink-2s">two seconds</div>
<div class="blink blink-3s">three seconds</div>

How to reverse animation on mouse out after hover

This is exactly what I want to achieve (animation starts when I hover and reveses after I hover off). I just do not want the animation start until I hover over the object. In code the animation starts right after refreshing.
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
#-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>

You can get rid of the animations and just add transform and transition properties directly on the class like this:
.class {
transform: rotate(0deg);
transition: transform 2s;
}
.class:hover {
transform: rotate(360deg);
transition: transform 5s;
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>

Javascript page transitions

I've been trying to create a fadein/fadeout effect for my pages in my Ruby on Rails app. I found a website, https://coderwall.com/p/t5ghhw/animated-page-transitions-in-rails-4-apps, that seemed to offer a reasonable guide, but it isn't working.
In each of my html files (except for application.html.erb), I have a div that encloses all of the content with a class called "primary-content." Then I have a css file, animate.css(adapted from http://daneden.github.io/animate.css/), with the following code:
.animated {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
This css file is in my assets/css folder, and is called in the header of my application.html.erb file.
Then there's the javascript, in a file in the assets/javascripts folder. It's required in application.js and called in the header of application.html.erb--and, when it wasn't working, I also called it at the bottom of each view. The code reads:
document.addEventListener('page:change', function() {
document.getElementById('primary-content').className += 'animated fadeInUp';
});
document.addEventListener('page:fetch', function() {
document.getElementById('primary-content').className += 'animated fadeOutUp';
});
I'm aiming for the existing page to fade out upward, and the new page to fade in upward. Does anyone see what I'm missing? I don't have any experience with keyframes, or with using -webkit in css, but that's all borrowed from the animate.css site.
Thanks!

Select an element and apply animation to child

I am trying to select an element, add hover to it, then have it select the child of that element. So, in this case, the hover should select the div and apply the animation to the p nested inside of it.
I have looked around on the w3schools website. I thought adding the :only-child selector might work, but it doesn't seem to. Perhaps that is not a valid syntax.
If possible, I would like to keep this CSS if possible, but perhaps it needs jquery. Does anyone know how to do this? Any input is appreciated.
HTML
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>
CSS
#dropDown1:hover:only-child {
/*****Display P in Drop Down on Hover*****/
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from { opacity: 0; }
to { opacity: 1; }
}

#dropDown1:hover .dropP {
Should do the trick. The .dropP specifies the element with class dropP that is a child of #dropDown1 when #dropDown1 is being hovered.

Hover somewhere below Home to see the text showing :)
You need to add prefixes for all vendors in you keyframes for this to work properly .
Change your css like this
.dropP{
opacity: 0;
}
#dropDown1:hover .dropP {
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

I need to override the default slide effect to dissolve effect.
When changePage function is called I need to slowly dissolve the current page to new page.
I tried with following CSS
#keyframes dissolve {
0% { opacity:1; }
5% { opacity:0.9;}
15% { opacity:0.7;}
25% { opacity:0.5;}
35% { opacity:0.3;}
45% { opacity:0;}
55% { opacity:0.2;}
65% { opacity:0.4;}
75% { opacity:0.6;}
85% { opacity:0.8;}
95% { opacity:0.9;}
100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
-webkit-animation-name: dissolve;
-moz-animation-name: dissolve;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 350ms
}
I have created a fiddle with above css.
The page transistion is not smooth with above code.
How to correct page transistion to run smoothly?

you need also vendor prefixes in #keyframes: #-webkit-keyframes and so on ..

I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile.
Please add #-webkit-keyframes ,#-moz-keyframes, and #-o-keyframes in CSS like #keyframes added below.
#keyframes dissolve-out {
0% { opacity: 1; }
20% { opacity: 0.5; }
40% { opacity: 0.2; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes dissolve-in {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0; }
60% { opacity: 0.2; }
80% { opacity: 0.6; }
100% { opacity: 1; }
}
.slideup.in, .slide.in, .slide.in.reverse {
-webkit-animation: dissolve-in;
-moz-animation: dissolve-in;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
-webkit-transform: translateX(0%);
-webkit-animation: dissolve-out;
-moz-transform: translateX(0%);
-moz-animation: dissolve-out;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
Please see the demo.
Above CSS will give you a dissolve effect with overriding the default slide effect of page transistion in jQuery Mobile.