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>
Related
Everything works perfectly in all browsers except Chrome. The fade in effects seems to work fine but the floatInCommand animation stutters and makes the Commend (a bootstrap container) lock in place after 1 second. I don't know if I need to add anything else besides "-webkit". I have looked at threads with similar problems and they all fix it by adding "-webkit".
.slide-in {
-webkit-animation-name: floatInCommend;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 1.25s;
}
#-webkit-keyframes floatInCommend {
from {
opacity: 0;
top: -100%;
}
to {
opacity: 1;
top: 75;
}
}
.slide-in-footer {
-webkit-animation-name: floatInFooter;
-webkit-animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0.5s;
}
#-webkit-keyframes floatInFooter {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.slide-in-nav {
-webkit-animation-name: floatInFooter;
-webkit-animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0.5s;
}
#-webkit-keyframes floatInNav {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
You need both the -webkit, -moz, and non vendor prefix attributes. Consider using a task runner and an autoprefixer to make sure you have all css vendor prefixes in place before publishing your code.
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>
I print success message using PHP like this :
<div class='alert alert-success'>Success!!</div>
I have this CSS3 Animate:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-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;
}
Now, I need to remove success message with my CSS Animate (fadeOutUp) after 5 seconds using jQuery. How do can i create this?!
You can create a hide a class which hide your element setting the opacity to 0 with a transition and add this class to your div with JavaScript.
CSS
.hide {
opacity: 0;
transition: opacity 1000ms;
}
JS
function fadeOut(el){
el.classList.add('hide');
}
div = document.getElementById('yourDiv');
setTimeout(function(){
fadeOut(div);
}, 5000);
HTML
<div id='yourDiv' class='alert alert-success'>Success!!</div>
Checkout this codepen.
Is this what you are looking for?
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}
or update your .fadeOutUp CSS to
.fadeOutUp {
-webkit-animation: fadeOutUp 5s infinite;
animation: fadeOutUp 5s infinite;
}
Then you can do
setTimeout(animateUp, 5000);
function animateUp() {
$(".alert").addClass("fadeOutUp");
}
JSFiddle
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>
I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. click here however i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction.
/** HTML **/
div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
/* jquery **/
$(".overlay").addClass("visible");
$(".overlay").removeClass("visible");
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("visible");
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("visible");
});
/** CSS ANIMATION **/
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-Webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
Add following css and HTML tag .
HTML code:-
<h1 class="animated fadeInUp" >Example</h1>
CSS code:-
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});