so apologies that there are similar questions to this. I've done my best to look so any help would be appreciated.
I'm using a new library of animations from Animista to animate certain elements on a practice site.
I have no issues with animating elements as the page loads but I'm not sure how to go about getting them to trigger as they become visible like is common on so many sites nowadays.
Take this example;
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.trigger {
/* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}
<h1 class="bounce-in-top trigger">Page title, animates on load</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>
The animation is applied to both header 1 and header 2 but the header 2 animation runs before the user sees it.
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.trigger {
/* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}
<h1 class="bounce-in-top trigger">Page title, animates on load</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>
I'd use some sort of query selector so each time an element to be animated would appear it should then run its animation.
Any help and working code would be more than appreciated because I cannot find how to implement this.
Thanks in advance.
I think what you should do is track the scrolling state of the page, and start the animation if the scrolling position is superior to a certain value, and then change the animation value of CSS by using Javascript.
A simple example would be like this:
<html lang="en">
<head>
<style>
#header2 {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: none 1s infinite; /* Safari 4.0 - 8.0 */
animation: none 1s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1 id="header1" style="height: 1200px;">This is first paragraph</h1>
<br>
<h1 id="header2">This is second paragraph</h1>
<script>
let myHeader2 = document.getElementById("header2");
window.setInterval(checkScrollingPosition, 200);
function checkScrollingPosition(){
console.log(window.scrollY)
if (window.scrollY > 200){
//starting animation if scrollPosition > 200
console.log("starting animation...")
startAnimation()
return;
}
}
function startAnimation(){
myHeader2.style.animation = "mymove 5s 1"
myHeader2.style.WebkitAnimation = "mymove 5s 1"
}
</script>
</body>
</html>
Depending of what you want to do, may be you could replace the threshold value to a certain percentage of the height of the page. For this just research the differents ways to get the scrolling state of the page.
Use the IntersectionObserver API. It makes it possible to check if the elements are in view of the user and call a function when that happens.
In the InterSectionObserver you call a function which will loop over all of the elements that have come in or out the view. In that function you can check each individual element to see its current position.
So check if an element is in the view, and if so, add the animation class to it.
Here below I've made a modification of your code. I've created a container around each title so that the title can animate within that container as well as to control the overflow.
So the .trigger elements are being watched. When they enter into view they get the class .bounce-in-top added to them.
To prevent the animation from suddenly animating from the top I've added a starting position for the .title elements. The starting position is always the same as the first keyframe of the animation.
// Create the observer.
const observer = new IntersectionObserver(entries => { // entries is a list of elements that have come in our out of view
entries.forEach(entry => { // Loop over every single entry
if (entry.isIntersecting || entry.intersectionRatio > 0) { // Check that an entry has come INTO view.
entry.target.classList.add('bounce-in-top'); // Add the class to the element.
}
});
});
// Select the triggers
const triggers = document.querySelectorAll('.trigger');
// Observe the triggers.
triggers.forEach(trigger => {
observer.observe(trigger);
});
/* Create a default begin state */
.title {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
}
/* Hide overflow of title container. */
.trigger {
overflow: hidden;
}
/* Select title for animation */
.bounce-in-top .title {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class="trigger">
<h1 class="title">Page title, animates on load</h1>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="trigger">
<h2 class="title">Lower down, should animate when visible</h2>
</div>
Related
so i have been through multiple answers already on stack overflow but due to me not being that experienced with JS i am here asking for some direct help with my question. I would like to keep the :hover state active even after my mouse has left the area of the element triggering the :hover.
At the moment i have an animation using css which is trigged using :hover selectors, now the problem i am having with the other answers provided i think is because the hover is trigged on one element while another element animates.
Below is my css and html,
css
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 100% 100%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 100% 100%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 100% 100%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100% 100%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 100% 100%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px) scaleY(NaN);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
HTML
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class = "offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:338px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>
BONUS POINTS i believe what i asked for is pretty standard and isn't too difficult and i wish i would do it myself so i will also challenege everyone by asking to even go one step further and if it would be possible to have js (or css) which would trigger the original animation on hover as is and then as the mouse leaves the element trigger another animation on the same element, basically allowing me to reverse the animation as the mouse leaves the area :)
Thank you all!
JS FIDDLE : https://jsfiddle.net/sLqf2zbh/
EDIT
I have seem to of over complicated with poor instructions; at the moment my animation works fine when #offerblock4 is hovered over making #rotategiggles animate . What i would wish to do is include JS so when the mouse leaves #offerblock4 then #rotategiggles keeps it's end of animation position and doesn't cut back too its original starting position.
The bonus points request was referring to when the mouse leaves the area of #offerblocks4 then the animation reverses back to its original position. I don't need help with the css animation itself more so something which will trigger a second animation when the mouse 'hovers off' #offerblocks4.
I have no idea what you were asking - but I think part of it was something like this?
How many bonus points do I get? (better be a lot)
#offerblock4+#rotategiggles {
animation: animationFrames8 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
transform: scale(-1.0, -1.0);
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames8 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames8 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames8 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames8 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#keyframes animationFrames8 {
100% {
transform: translate(1px, 1px);
}
0% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames8 {
100% {
-moz-transform: translate(1px, 1px);
}
0% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames8 {
100% {
-webkit-transform: translate(1px, 1px);
}
0% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames8 {
100% {
-o-transform: translate(1px, 1px);
}
0% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames8 {
100% {
-ms-transform: translate(1px, 1px);
}
0% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class="offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:3px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>
I am trying to show and hide the div based on css animation, but I need to hide the entirely once the button is clicked, and it should happen along with animation.
Currently it is animating but not hiding.
THis is what I tried.
document.getElementById('toggle').onclick = function(evt) {
var eSib = evt.target.previousElementSibling.className;
if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){
evt.target.previousElementSibling.className = 'slideUp';
}
else{
evt.target.previousElementSibling.className = 'slideDown';
}
}
.slideDown{
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.98);
}
100% {
transform: scaleY(0);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.98);
}
100% {
-webkit-transform: scaleY(0);
}
}
<div class="slideDown">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<button id="toggle">Slide Up/Down</button>
You can use animation-fill-mode: forwards; in your .slideUp class to persist the state of the animation after it has completed.
.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
animation-fill-mode: forwards;
}
Here is a fiddle of it in action: https://jsfiddle.net/3m353906/
The vendor prefixes and more info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Use animation-fill-mode to maintain the final state of the animation.
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
Working version:
document.getElementById('toggle').onclick = function(evt) {
var eSib = evt.target.previousElementSibling.className;
if (evt.target.previousElementSibling.className.indexOf('slideDown') >= 0) {
evt.target.previousElementSibling.className = 'slideUp';
} else {
evt.target.previousElementSibling.className = 'slideDown';
}
}
.slideDown {
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullDown {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes pullDown {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
.slideUp {
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
}
#keyframes pullUp {
0% {
transform: scaleY(0.98);
}
100% {
transform: scaleY(0);
}
}
#-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.98);
}
100% {
-webkit-transform: scaleY(0);
}
}
<div class="slideDown">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<button id="toggle">Slide Up/Down</button>
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 create JSFiddle for animation. My animation not supported in IE9. Any suggestion.
http://jsfiddle.net/fJxsV/
HTML
<html>
<head>
<link rel="stylesheet" href="style2.css" media="screen" />
</head>
<body>
<div id="container">
<div id="button">Hover here!</div>
<div id="globe_small"></div>
<div id="globe_large"></div>
<div id="globe_hands"></div>
<div id="globe_background"></div>
</div>
</body>
</html>
#container{position:relative;width:500px;}
#button {position:absolute;width:300px;background-color:pink;top:420px;z-index:5; margin:0 auto;text-align:center;padding-top:15px; padding-bottom:15px;color:#fff; text-transform:uppercase;font-weight:bold;left:90px;}
#globe_background{background:red;width:494px;height:397px;z-index:1;position:absolute; top:0;}
#globe_hands{background:blue;width:295px;height:129px;z-index:3;top:265px; left:96px;position:absolute;}
#globe_small {background:green;height:160px;width:160px;position:absolute; left:165px;top:185px;z-index:4;-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration: 0.8s;-ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform; transition-property: -o-transform;transition-property: transform;-ms-transition-property: transform;
}
#button:hover ~ #globe_large{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: mozspin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
-o-animation-name: ospin;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 1s;
-ms-animation-name: msspin;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 1s;
animation-name: nospin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes mozspin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes ospin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes nospin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes msspin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
http://jsfiddle.net/fJxsV/
Try using -ms-transform in addition to your other rules, see below...
...be aware that -ms-transform is the only form of this property that is
recognized by Windows Internet Explorer 9..
http://msdn.microsoft.com/en-us/library/ie/jj127312%28v=vs.85%29.aspx
I want a CSS3 transition to start after click.
Now it works fine if the element gets added a class with jQuery (see span.toggle-nav.two) which knows then what to do.
I've tried with :focus (see span.toggle-nav.one) but that doesn't work. How can I make it work without jQuery?
Please have a look here: http://jsfiddle.net/aE4C7/ clicking on Two works but clicking on One does not.
<span class="toggle-nav one">One</span>
<span class="toggle-nav two">Two</span>
<script type="text/javascript">
$('.toggle-nav.two').on('click',function(){
$(this).addClass("click");
});
</script>
<style type="text/css">
.toggle-nav {
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
background-repeat:no-repeat;
width:50px;height:50px;
display:inline-block;
}
.toggle-nav.one:focus {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
.toggle-nav.two.click {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(180deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(180deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(180deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(180deg);}
}
</style>
Is there a way to make this work without jQuery?
To let span getting focus, you need to set tabindex attribute:
<span class="toggle-nav one" tabindex="-1">One</span>
Then you could wish for styling to set CSS outline property too:
outline: none;
DEMO
You can actually do this using purely CSS - The only way to correctly simulate click events in CSS is to fake it with a checkbox, otherwise using :active or :focus will stop any applied transition or animation as soon as the element loses focus, not when it is clicked on again.
Demo Fiddle
HTML
<div>
<input id='box' type='checkbox' />
<label for='box'>Click Me!</label>
</div>
CSS
div {
position:relative;
}
label {
position:absolute;
left:0;
background:white;
}
input[type=checkbox] {
opacity:0;
}
input[type=checkbox]:checked + label {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(180deg);
}
}