How to run animation every time onClick in React? - javascript

I want an animation that runs on every click.
However, it runs only the first time and not after the second click.
Is there a way?
const inputEl = useRef();
const onButtonClick = () => {
inputEl.current.style.animation = "0.7s ease-in-out 0s 1 testKeyword";
};
return(
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
);
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

I have 2 different solutions depending on your needs:
Solution 1: using useRef
js file
const inputEl = useRef();
const handleButtonClick = () => {
inputEl.current.style.animation = "0.7s ease-in-out 0s 1 testKeyword";
}
const handleAnimationEnd = () => {
inputEl.current.style.animation = "none";
}
<input ref={inputEl} onAnimationEnd={handleAnimationEnd} type="text"/>
<button onClick={handleButtonClick} >Focus the input</button>
css file:
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Solution 2: using useState
js file:
const [clicked, setClicked] = useState(false);
<input type="text" class={clicked === true ? "animate" : null} onAnimationEnd={() => setClicked(false)}/>
<button onClick={() => setClicked(true)}>Focus the input</button>
css file:
.animate {
animation: 0.7s ease-in-out 0s 1 testKeyword;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

This should help! I am using a class that contains the animation and then I am adding it on button click, then after 700ms I am removing this class using setTimeout
class Demo extends React.Component {
handleClick() {
const inpEl = document.querySelector(".Demo-input");
inpEl.classList.add("Demo-animate");
setTimeout(() => {
inpEl.classList.remove("Demo-animate");
}, 700);
}
render() {
return (
<div className="Demo">
<input className="Demo-input" type="text" />
<button onClick={this.handleClick}> Click Me </button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("root"));
.Demo-animate {
animation: 0.7s ease-in-out 0s 1 testKeyword;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You are just setting the animation style property of the element once and after the animation has completed 100%, it won't start again. What you can do is add a class to the element which changes the style of the element and remove it after some time interval.
const onButtonClick = () => {
const element = document.querySelector("input");
element.classList.add("fade");
setTimeout(() => {
element.classList.remove("fade");
}, 200);
};
return (
<>
<input type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
The CSS for the same would look something like this
.fade {
animation: 0.7s ease-in-out 0s 1 testKeyword;opacity: 0;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Note:
This implementation uses setTimeout which is an asynchronous API. It may happen at some point in time when the stack is not empty and the callback to remove the fade class is waiting in the task queue, then the code will freeze until the task is cleared. This is a rare case but it is important to know about it.
You can refer to this video on eventloop (What the heck is the event loop anyway? | Philip Roberts | JSConf EU) on youtube to understand this better. Here is the link https://youtu.be/8aGhZQkoFbQ?t=769

Related

How to retrigger function (translate animation )

My animation function only runs once. I've tried removing and adding classes, as well as running a animationend function to create a retrigger. But still no luck. Any vanilla JS ideas?
CSS:
#element {
width: 10px;
height: 10px;
animation: "";
#keyframes movedown {
100% {
transform: translateY(10px);
}
}
JS:
btn_button.onclick = () => {
element.style.animation = "movedown 10s";
};
HTML:
<div id="element"></div>
You can use setTimeout to set element.style.animation to "". Then, you can add animation name again upon button click.
let btn = document.querySelector("#btn");
btn.onclick = () => {
element.style.animation = "movedown 2s";
setTimeout(() => element.style.animation = "", 2000)
};
#element {
width: 10px;
height: 10px;
background-color: red;
}
#keyframes movedown {
100% {
transform: translateY(50px);
}
}
<div id="element"></div>
<button id="btn">Trigger</button>

How to add transition from one function to another in JavaScript?

I want to add some smooth transition or animation from the mouse enter event to the mouse leave.
JS :
/* mudar cor do logo maior */
var myImage = document.querySelector('img#logo-maior');
myImage.onmouseenter = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo-coral.png');
}
myImage.onmouseleave = function() {
var mySrc = myImage.getAttribute('src');
myImage.setAttribute ('src','images/type-logo.png');
}
HTML :
<div class="display">
<img id="modelos" src="images/modelos/1.png">
<img id="logo-maior" src="images/type-logo.png" alt="TYPE logo">
<!--
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
-->
</div>
Use CSS Animation. Add class for each function that will trigger the animation
Try this code
css
.transition1{
animation: fadeIn1 1.5s;
-webkit-animation: fadeIn1 1.5s; ;
opacity: 1;
}
#keyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframeskeyframes fadeIn1{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.transition2{
animation: fadeIn2 1.5s;
-webkit-animation: fadeIn2 1.5s; ;
opacity: 1;
}
#-webkit-keyframeskeyframes fadeIn2{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
javascript
var myImage = document.querySelector("img#logo-maior");
myImage.onmouseenter = function() {
myImage.classList.remove("transition2");
myImage.setAttribute("class", "transition1");
myImage.setAttribute("src", "../image2.jpg");
};
myImage.onmouseleave = function() {
myImage.classList.remove("transition1");
myImage.setAttribute("class", "transition2");
myImage.setAttribute("src","../image1.jpg"
);
};
html
<div class="display">
<img
id="logo-maior"
src="../img1.jpg"
alt="TYPE logo"
/>
</div>
In your CSS code:
img:hover {
(whatever styles you want for the hovering effect)
transition: all 0.5s ease-out;
}
For more information on transitions visit: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Implementing transition effects in React JS when state changes

I have an image on a React page. When the state is updated to a new image I want to perform the following transition effect:
The original image should zoom in and fade out
The new image should also zoom in and fade in
The effect should look similar to passing through a wall to a new scene.
How am I able to do this in React?
As #pgsandstrom mentioned, React Transition Group is the way to go. Unfortunately, it's not very developer friendly (pretty steep learning curve).
Here's a working example: https://codesandbox.io/s/6lmv669kz
✔ Original image zooms in while fading out
✔ New image zooms in while fading in
TransitionExample.js
import random from "lodash/random";
import React, { Component } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import uuid from "uuid/v1";
const arr = [
{
id: uuid(),
url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
},
{
id: uuid(),
url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
},
{
id: uuid(),
url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
}
];
export default class TransitionExample extends Component {
state = {
index: 0,
selected: arr[0]
};
nextImage = () =>
this.setState(prevState => {
const newIndex = prevState.index < arr.length - 1 ? prevState.index + 1 : 0;
return {
index: newIndex,
selected: arr[newIndex]
};
});
render = () => (
<div className="app">
<div style={{ marginBottom: 30, height: 100 }}>
<TransitionGroup>
<CSSTransition
key={this.state.selected.id}
timeout={1000}
classNames="messageout"
>
<div style={{ marginTop: 20 }}>
<img className="centered-image" src={this.state.selected.url} />
</div>
</CSSTransition>
</TransitionGroup>
</div>
<div style={{ textAlign: "center" }}>
<button
className="uk-button uk-button-primary"
onClick={this.nextImage}
>
Next Image
</button>
</div>
</div>
);
}
styles.css
.app {
margin: 0 auto;
overflow: hidden;
width: 700px;
height: 800px;
}
.centered-image {
display: block;
margin: 0 auto;
}
/* starting ENTER animation */
.messageout-enter {
position: absolute;
top: 0;
left: calc(13% + 5px);
right: calc(13% + 5px);
opacity: 0.01;
transform: translateY(0%) scale(0.01);
}
/* ending ENTER animation */
.messageout-enter-active {
opacity: 1;
transform: translateY(0%) scale(1);
transition: all 1000ms ease-in-out;
}
/* starting EXIT animation */
.messageout-exit {
opacity: 1;
transform: scale(1.01);
}
/* ending EXIT animation */
.messageout-exit-active {
opacity: 0;
transform: scale(4);
transition: all 1000ms ease-in-out;
}
It sounds like you are looking for React Transition Group. It is the "official" way of solving these issues. Specifically I think this is what you should use. It can be a bit tricky to get a hang of, but it is really nice and powerful once you understand it.
This worked for me (link):
index.js:
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
const src1 =
"https://www.nba.com/dam/assets/121028030322-james-harden-traded-102712-home-t1.jpg";
const src2 = "https://www.nba.com/rockets/sites/rockets/files/wcwebsite.jpg";
var state = {
toggle: true
};
class App extends React.Component {
render() {
const cn1 = "imgFrame " + (state.toggle ? "toggleOut" : "toggleIn");
const cn2 = "imgFrame " + (state.toggle ? "toggleIn" : "toggleOut");
return (
<div>
<img className={cn1} src={src1} alt={"img1"} />
<img className={cn2} src={src2} alt={"img2"} />
<button
onClick={() => {
state.toggle = !state.toggle;
this.forceUpdate();
}}
>
click me to toggle
</button>
<h1>Hello</h1>
</div>
);
}
}
render(<App />, document.getElementById("app"));
style.scss:
html,
body {
background-color: papayawhip;
font-family: sans-serif;
h1 {
color: tomato;
}
}
#keyframes fadeout {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
#keyframes fadein {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.toggleOut {
animation: fadeout 500ms;
opacity: 0;
}
.toggleIn {
animation: fadein 500ms;
opacity: 1;
}
.imgFrame {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
}
button {
position: absolute;
top: 220px;
}
Wrap with a simple <Animate on={value} /> component that triggers an animation when value changes and is not undefined.
function Animate({ children, on }) {
return (on === undefined)
? <div>{children}</div>
: <div className="fade-in" key={on}>{children}</div>
}
import { useEffect, useState } from 'react'
function TestAnimate() {
const [value, setValue] = useState() // undefined
// update value every second
useEffect(() => {
setInterval(() => setValue(new Date().toLocaleString()), 1_000)
}, [])
return (
<Animate on={value}>
Value: {value}
</Animate>
)
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 500ms ease-in-out;
}

requestAnimationFrame is not triggering the function supplied to it

I implemented a infinite loop animation using setInterval. I now like to change the implementation to requestAnimationFrame() so that I will have performance which I am after. For some reasons, requestAnimationFrame() does not call the function supplied to it.
My code looks like this;
var index = 0;
var $btn = $('.btn');
function btnBlinkRun() {
if (index < 2) {
index = index + 1;
} else {
index = 0;
}
$('#ani--scaleinout').removeAttr('id');
$($btn[index]).attr('id', 'ani--scaleinout');
window.requestAnimationFrame(btnBlinkRun);
}
btnBlinkRun();
.btn{
width: 30px;
height: 30px;
background: blue;
border-radius: 100%;
margin-bottom: 10px;
}
#ani--scaleinout {
animation: zoominout 1s ease-in;
}
#keyframes zoominout {
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="btn" id="ani--scaleinout"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
It looks like what's going on is you are firing requestAnimationFrame multiple times per second. Your css animation has a duration of 1s. But you are removing the attribute every x ms.
It is triggering, it's just happening so fast you can't see it. To demonstrate change your call to window.requestAnimationFrame to use a setTimeout and you'll notice the animation:
setTimeout(function() {
window.requestAnimationFrame(btnBlinkRun);
}, 1000);
Not saying this is a preferred solution, but explaining why this is happening.
It executes alright. But it does not do what you want it to, i presume.
Animation frame fires on every single rending frame (e.g. 60fps) and not on CSS animation keyframes.
The animationend event is your friend here.
var index = 0;
var buttons = document.querySelectorAll('.btn');
function btnBlinkRun() {
if (index < 2) {
index = index + 1;
} else {
index = 0;
}
const element = document.querySelector('#ani--scaleinout');
element.id = null;
buttons[index].id = 'ani--scaleinout';
buttons[index].addEventListener("animationend", btnBlinkRun, { once: true });
}
btnBlinkRun();
.btn{
width: 30px;
height: 30px;
background: blue;
border-radius: 100%;
margin-bottom: 10px;
}
#ani--scaleinout {
animation: zoominout 1s ease-in;
}
#keyframes zoominout {
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<div>
<div class="btn" id="ani--scaleinout"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>

Javascript Text Rotate

Hello guys it's been bugging me all night. I've been trying to get together a word rotate feature that decreases in speed and then eventually stops. Think of it like a word roulette. So i have the words stored in an array and it looks over the words and displays them. Now, i need to decelerate the speed and slowly make it stop and a random lettter, how would i go about this ?
<?php
$json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json');
$champions = json_decode($json);
?>
<?php
$championsArray = array();
foreach($champions->data as $champion){
$championsArray[] = $champion->id;
}
shuffle($championsArray);
$speed = 1000;
$count = count($championsArray);
var_dump($championsArray);
?>
<!DOCTYPE html>
<html lang="en" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Super Simple Text Rotator Demo 1: Default Settings</title>
<meta name="description" content="Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others" />
<meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" />
<meta name="author" content="Author for Onextrapixel" />
<link rel="shortcut icon" href="../file/favicon.gif">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<!-- Edit Below -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jquery.wordrotator.css">
<script src="jquery.wordrotator.js"></script>
</head>
<body class="demo1">
<div class="container">
<p><span id="myWords"></span></p>
<div class="main">
Go!
</div>
</div><!-- Container -->
<script type="text/javascript">
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger','Ezreal','Skarner','Nunu','Kennen','Lulu','Morgana','Sejuani','Draven','Nocturne','KogMaw','Jinx','Khazix','Cassiopeia','Fiora','Maokai','Zac','Quinn','Vladimir','RekSai','LeeSin','TwistedFate','MissFortune','Shaco','Vayne','Sivir','Urgot','Nautilus','Annie','Fizz','Janna','Irelia','Karthus','Trundle','Jax','Graves','Leona','Rengar','Amumu','Malzahar','TahmKench','MasterYi','Twitch','Rumble','Nidalee','Shyvana','Veigar','Singed','Riven','Leblanc','Katarina','Azir','Viktor','Poppy','Ahri','Yorick','Aatrox','Brand','Tryndamere','DrMundo','Hecarim','Braum','Nasus','Pantheon','Elise','Velkoz','Swain','Darius','Kayle','Thresh','Nami','Ekko','Alistar','Galio','Warwick','Orianna','Sona','Lux','Ryze','Jayce','Kassadin','Volibear','Blitzcrank','Gangplank','Karma','XinZhao','Ziggs','Malphite','Tristana','Soraka','Anivia','Xerath','Renekton','Shen','Lissandra','Ashe','Mordekaiser','Talon','Zilean','JarvanIV','Rammus','Yasuo','Vi','Bard','Sion','Udyr','MonkeyKing','Akali','Diana','Varus','Kalista','Evelynn','Teemo','Gnar','Garen','Taric','FiddleSticks','Chogath','Zed','Lucian','Caitlyn','Corki','Zyra','Syndra','Gragas','Olaf']
});
});
eventFire(document.getElementById('myWords'), 'click');
}
</script>
</body>
</html>
Can anyone figure out a solution for this?
You could modify a bit the wordrotator plugin so that it allows to change the speed on each rotate.
You'll have to tweak the animation and the speed increment, but this should give you some ideas:
(function ($) {
$.fn.wordsrotator = function (options) {
var defaults = {
autoLoop: true,
randomize: false,
stopOnHover: false,
changeOnClick: false,
words: null,
animationIn: "flipInY",
animationOut: "flipOutY",
speed: 40,
onRotate: function () {},//you add these 2 methods to allow the effetct
stopRotate: function () {}
};
var settings = $.extend({}, defaults, options);
var listItem
var array_bak = [];
var stopped = false;
settings.stopRotate = function () {//you call this one to stop rotate
stopped = true;
}
return this.each(function () {
var el = $(this)
var cont = $("#" + el.attr("id"));
var array = [];
//if array is not empty
if ((settings.words) || (settings.words instanceof Array)) {
array = $.extend(true, [], settings.words);
//In random order, need a copy of array
if (settings.randomize) array_bak = $.extend(true, [], array);
listItem = 0
//if randomize pick a random value for the list item
if (settings.randomize) listItem = Math.floor(Math.random() * array.length)
//init value into container
cont.html(array[listItem]);
// animation option
var rotate = function () {
cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>");
if (settings.randomize) {
//remove printed element from array
array.splice(listItem, 1);
//refill the array from his copy, if empty
if (array.length == 0) array = $.extend(true, [], array_bak);
//generate new random number
listItem = Math.floor(Math.random() * array.length);
} else {
//if reached the last element of the array, reset the index
if (array.length == listItem + 1) listItem = -1;
//move to the next element
listItem++;
}
$("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont);
cont.wrapInner("<span class='wordsrotator_words' />");
cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut);
cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn);
settings.onRotate();//this callback will allow to change the speed
if (settings.autoLoop && !stopped) {
//using timeout instead of interval will allow to change the speed
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
});
if (settings.stopOnHover) {
cont.hover(function () {
window.clearTimeout(t)
}, function () {
t = setTimeout(rotate, settings.speed, rotate);
});
};
}
};
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
})
cont.on("click", function () {
if (settings.changeOnClick) {
rotate();
return false;
};
});
};
});
}
}(jQuery));
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
animationIn: "fadeOutIn", //css class for entrace animation
animationOut: "fadeOutDown", //css class for exit animation
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger', 'Ezreal', 'Skarner', 'Nunu', 'Kennen', 'Lulu', 'Morgana', 'Sejuani', 'Draven', 'Nocturne', 'KogMaw', 'Jinx', 'Khazix', 'Cassiopeia', 'Fiora', 'Maokai', 'Zac', 'Quinn', 'Vladimir', 'RekSai', 'LeeSin', 'TwistedFate', 'MissFortune', 'Shaco', 'Vayne', 'Sivir', 'Urgot', 'Nautilus', 'Annie', 'Fizz', 'Janna', 'Irelia', 'Karthus', 'Trundle', 'Jax', 'Graves', 'Leona', 'Rengar', 'Amumu', 'Malzahar', 'TahmKench', 'MasterYi', 'Twitch', 'Rumble', 'Nidalee', 'Shyvana', 'Veigar', 'Singed', 'Riven', 'Leblanc', 'Katarina', 'Azir', 'Viktor', 'Poppy', 'Ahri', 'Yorick', 'Aatrox', 'Brand', 'Tryndamere', 'DrMundo', 'Hecarim', 'Braum', 'Nasus', 'Pantheon', 'Elise', 'Velkoz', 'Swain', 'Darius', 'Kayle', 'Thresh', 'Nami', 'Ekko', 'Alistar', 'Galio', 'Warwick', 'Orianna', 'Sona', 'Lux', 'Ryze', 'Jayce', 'Kassadin', 'Volibear', 'Blitzcrank', 'Gangplank', 'Karma', 'XinZhao', 'Ziggs', 'Malphite', 'Tristana', 'Soraka', 'Anivia', 'Xerath', 'Renekton', 'Shen', 'Lissandra', 'Ashe', 'Mordekaiser', 'Talon', 'Zilean', 'JarvanIV', 'Rammus', 'Yasuo', 'Vi', 'Bard', 'Sion', 'Udyr', 'MonkeyKing', 'Akali', 'Diana', 'Varus', 'Kalista', 'Evelynn', 'Teemo', 'Gnar', 'Garen', 'Taric', 'FiddleSticks', 'Chogath', 'Zed', 'Lucian', 'Caitlyn', 'Corki', 'Zyra', 'Syndra', 'Gragas', 'Olaf'],
onRotate: function () {
//on each rotate you make the timeout longer, until it's slow enough
if (this.speed < 600) {
this.speed += 20;
} else {
this.stopRotate();
}
}
});
});
eventFire(document.getElementById('myWords'), 'click');
}
#charset"utf-8";
.wordsrotator_words {
display: inline-block;
position: relative;
white-space:nowrap;
-webkit-transition: width 100ms;
-moz-transition: width 100ms;
-o-transition: width 100ms;
transition: width 100ms;
}
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn {
position: relative;
display: inline-block;
-webkit-animation-duration: 50ms;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 50ms;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: 50ms;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
}
.wordsrotator_words .wordsrotator_wordOut {
left: 0;
top: 0;
position: absolute;
display: inline-block;
}
.wordsrotator_words .wordsrotator_wordOut span {
width: auto;
position: relative;
}
.wordsrotator_words .wordsrotator_wordIn {
opacity: 0;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<p><span id="myWords"></span>
</p>
<div class="main"> Go!
</div>
</div>

Categories