Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rollIn {
0% {
opacity:0;
transform:translate3d(-100%, 0, 0) rotate(-120deg);
}
to {
opacity:1;
transform:none;
}
}
.rollIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rollIn{
opacity: 0;
}
.rollIn.go{
animation-name: rollIn;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop).
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rollIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rollIn go">This element will rollIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rollInClickTrigger.rollIn").click(function(){
//use line above for animate on click.
//comment out "rollInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rollInHoverTrigger.rollIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rollIn rollInClickTrigger">This element will rollIn when clicked</div>
OR, FOR HOVER:
<div class="rollIn rollInHoverTrigger">This element will rollIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rollInClickTrigger.rollIn").click(function(){
//use line above for animate on click.
//comment out "rollInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rollInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rollIn rollInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rollIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rollIn rollInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rollIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rollIn" to its CHILD:
<div class="animatedParent">
<div class="animated rollIn">This Will rollIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rollIn">This Will rollIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rollInInDown">This element will rollIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add
data-id="X
" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence).
See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rollIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rollIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rollIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rollIn clickExampleOne">This appears with animation effect rollIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rollIn clickExampleOne">This element is animated with rollIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rollIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rollIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rollIn.go{
animation-name: rollIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rollIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rollInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rollInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rollIn" html element to make the animation fire
animation-name: rollInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rollIn clickExampleTwo rollInGoAway">This appears with animation effect rollIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rollInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of
animatedClick and a
data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The
SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a
data-sequence= attribute to an element and various classes to other elements with sequential
data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the
animatedClickelement in another HTML element with the class
animatedParent on it. Don't forget to add
animated class to child along with the name of the animation you want to put on it. We use "rollIn" in this html example:
<div class="animatedParent">
<div class="animated rollIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here