I want tot revert back to my first position from the current frame of animation.
Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation.
// html
------------------------------------
<div class="wrapper">
<div class="test"></div>
</div>
Css
.wrapper {width: 300px; height: 400px; position: relative;}
.test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}
.wrapper:hover .test{
animation-name:testin ; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
#keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
#-webkit-keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
Please tell me if there is any javascript / jquery help or library for this kind of effects.
Thanks
what you want to achieve can be done with JavaScript or JQuery. These two are the ones that triggers functionality in a web page, so in your example the functionality of ":hover" (which is CSS) can also be achieved with JS libraries. In this case a simple one to use is hover(), so let's say we use JQuery library for this, and we'll start off by setting the appropiate scripts and markup in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
<script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Once you have that, we will need to create the other keyframe animation which will be the opposite, something like this:
#keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
#-webkit-keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
Now for the JS part, what we will do is to create a class in CSS from the one you already had, and create two classes, one with the keyframe animation-name: "testin", and the other with "testinBack":
.animationTest{
animation-name: testin; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.animationTestBack{
animation-name: testinBack; -webkit-animation-name:testinBack;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
With that created, now the JS part should end up like this:
$( ".wrapper" ).hover(function() {
$('.test').addClass('animationTestin');
$('.test').removeClass('animationTestinBack');
},function(){
$('.test').removeClass('animationTestin');
$('.test').addClass('animationTestinBack');
});
So that when you hover on the wrapper you add the class that has the animation going down, and when you hover out, you remove that class and then add the animation going up.
Here is a fiddle:
https://jsfiddle.net/n1k5hkff/
Hope it helps,
Leo.
Related
How can I trigger an animations from this library https://ianlunn.github.io/Hover/ with javascript?
I tried adding the class and then triggering a mouseover event, but that didn't work:
$(this).addClass('hvr-pop');
$(this).trigger('mouseover');
I didn't realize you can't trigger the :hover class with jQuery, so I added a separate class hvr-pop-trigger to the .css file:
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active, .hvr-pop-trigger {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
and add the class with jQuery when I want to trigger the effect:
$(this).addClass('hvr-pop');
$(this).addClass('hvr-pop-trigger');
I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!
CSS3 for the animation where the idea is to fade in certain words on a continuous loop basis.
<style>
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 h3{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 h3:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words-1 h3:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; transform: translateY(-30px); }
5% { opacity: 1; transform: translateY(0px);}
17% { opacity: 1; transform: translateY(0px); }
20% { opacity: 0; transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
Animation ends
<div class="slideContainers" id="sC1">
1.Text-animation where h3 elements are supposed to fade in
<span class="demo4"> We do the
<div class="rw-words rw-words-1">
<h3>zumba</h3>
<h3>rumba</h3>
<h3>happiness</h3>
</div>
here. </span>
2. Text animation ends
</div><!-- sC1 ends -->
</div><!-- slide1 ends -->
3. Slide2 whose background goes invisible
<div id="slide2" class="slide" data-slide="2" data-stellar-background-ratio="0.5">
<div class="slideContainers" id="sC2">
<h1 class="pageTitle">About Us</h1>
<p id="aboutCopy" class="copy">When there's a lot on your plate, putting real good food, from real good ingredients, on the dinner table can be a hassle.<br>
But imagine if the easy answer to "What's for dinner?" was the better one for you. </p>
</div><!-- sC2 ends -->
</div><!-- slide2 ends -->
Tried without 0s at end ? i.e.g, animation: rotateWord 18s linear infinite; ? animation-delay property at post may not be positioned at correct order according to syntax guidelines
https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Syntax
Syntax
Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.
Im trying to get an animation to trigger when I update the elements class via javascript. The intention is for this to be part of a PhoneGap app so -webkit- prefixes should do the job to my knowledge.
Anyhow, the animations are currently not working when I'm testing in Chrome, both when on the element alone as well on the new class. Can anybody explain where I'm going wrong here?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
Start
</a>
<div id="ani"></div>
</body>
</html>
style.css
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(50px);
}
20%, 60% {
-webkit-transform: translateY(70px);
}
80%, 40% {
-webkit-transform: translateY(30px);
}
}
#ani {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: red;
-webkit-transform: all 0.1s;
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 2s;
}
#ani.bounce{
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
}
#ani.fade{
-webkit-transition: opacity 0.4s linear;
-webkit-animation-delay: 3s;
}
There are two problems. First there is a typo in your inline Javascript: getElementById('ani1'). There is a "1" appended at the id.
The second thing is that you have to remove the quotes in the -webkit-animation statements.
Incorrect:
-webkit-animation: 'bounce' 1s 'ease-in-out';
Correct:
-webkit-animation: bounce 1s ease-in-out;
If you fix that, it should work ;-)
I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.
I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.
HTML
<div id=click>Click me</div>
<div id=spinner></div>
jQuery
$(function () {
$("#click").click(
function () {
document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['animation-iteration-count'] = '1';
document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';
});
});
CSS
#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin-constant {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin-constant {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin-constant {
from {
transform:rotate(0deg);
}
to {
transform:rotate(36 0deg);
}
}
Here is the fiddle of the basic concept.
http://jsfiddle.net/jN5vw/1/
Try this one:
See Demo
jQuery:
$('#click').click(function () {
$("#spinner").removeClass('spinner');
$("#spinner").addClass('anim');
});
CSS:
.anim{
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin 5s ;
-webkit-animation: spin 1s linear;
-webkit-animation-iteration-count:1;
}
I think this is what you are asking.