I'm struggling with creating split animation with two icons. I want to split icons with some translation in X axis after hover on container but it seems that I'm doing something wrong. On codepen its not even animating, in my app its working but icons return to their original position after animation, forwards property doesn't help.
<html>
<head>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div #mouseenter="showButtons()" #mouseleave="hideButtons()" class="container">
<transition name="icon-left">
<span v-show="show_buttons"> A </span>
</transition>
<transition name="icon-right">
<span v-show="show_buttons"> B </span>
</transition>
</div>
</div>
</body>
</html>
const { createApp } = Vue
createApp({
data() {
return {
show_buttons: false,
}
},
methods: {
showButtons() {
this.show_buttons = true
},
hideButtons() {
this.show_buttons = false
}
}
}).mount('#app')
.container {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 400px;
border: 1px black solid ;
}
.icon-left-enter-from {
opacity: 0;
transform: translate(0px);
}
.icon-left-enter-active {
transition: all 0.3s forwards;
}
.icon-left-enter-to {
opacity: 1;
transform: translate(-200px);
}
.icon-right-enter-from {
opacity: 0;
transform: translate(0px);
}
.icon-right-enter-active {
transition: all 0.3s forwards;
}
.icon-right-enter-to {
opacity: 1;
transform: translate(200px);
}
Here is live codepen https://codepen.io/dymek662/pen/bGMxJwY
Here I have it working: https://codepen.io/yoduh/pen/yLjRRRN
I slowed the left one down so you can see the opacity change more clearly. Here's all the relevant code:
<transition name="icon-left" class="left">
<span v-show="show_buttons"> A </span>
</transition>
<transition name="icon-right" class="right">
<span v-show="show_buttons"> B </span>
</transition>
.icon-left-enter-from {
opacity: 0
}
.icon-left-enter-active {
animation: left-translate 3s;
transition: opacity 3s;
}
.left {
transform: translate(-200px);
}
#keyframes left-translate {
0% {
transform: translate(0px);
}
100% {
transform: translate(-200px);
}
}
.icon-right-enter-active {
animation: right-translate 0.3s;
transition: opacity 0.3s;
}
.right {
transform: translate(200px);
}
#keyframes right-translate {
0% {
transform: translate(0px);
}
100% {
transform: translate(200px);
}
}
"forwards" is not used with transition, but with animation instead, specifically it is shorthand for animation-fill-mode. If you want to maintain the end state, you should use animation. However, animation-fill-mode: forwards only holds the final animation state for as long as the animation property exists, e.g. for as long as a hover event is ongoing. In your case, once the animation is complete the animation property is removed. There is a workaround which is to set the "default" state of your element to match the final state of your animation. That's why I added a separate left and right class to always apply the translate transformation as long as the elements are visible (and not currently animating)
Related
Coming from https://stackoverflow.com/a/9334132/3779853: Let's assume a basic element that gets toggled programmatically. This could mean setting display to none/block or removing/inserting the element altogether.
$('#toggle').click(() => $('#square').toggle());
#square {
width: 50px;
height: 50px;
background: lightblue;
}
.animated {
animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
With a simple animation, you can add a transition effect for when the element appears. How do you do the same thing for when the element disappears?
I do not want to add further classes, no :hover, and no more Javascript code. In many JS frameworks, you can show/hide elements easily: .toggle() (JQuery, as above), ng-if (AngularJS), *ngIf (Angular), conditional rendering (React), v-if (VueJS) and so on. With above solution, a simple class="animated" is enough to have it appear with custom animations. So I am looking for a pure CSS solution for fade out animation here, assuming this is a standard problem.
Here is a 100% pure css solution.
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
}
#myBox:checked ~ .animated {
opacity: 0;
}
#myBox ~ .animated {
opacity: 1;
}
<input type="checkbox" id="myBox" style="display:none;"/>
<button id="toggle"><label for="myBox">toggle</label></button>
<div id="square" class="animated"></div>
You can use the opacity property with transition effect.
$('#toggle').click(() => $('#square').toggleClass('animated'));
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 0.5s;
opacity: 1;
}
#square.animated {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
I'm trying to use animation-direction: reverse to refactor my CSS keyframe animation. I have a container div when clicked will toggle an "active" class on it via jQuery which triggers the animation (forward or backward depending on the "active" state). The forward and backward animations are exactly the same thing except the keyframes are in the reverse order. I figured that animation-direction: reverse would enable me to refactor it by just using one animation and reversing it for the other, but it's not working the way I thought it would.
Link to codepen (without using animation-direction: reverse):
https://codepen.io/soultrust/pen/gogKjN
The following markup and CSS (Sass) code snippet is the way it works now without reverse.
<div class="container">
<div class="line"></div>
</div>
$width-height: 100px;
$duration: 1s;
$line-width: 10%;
$animation-distance: $width-height * .45;
#keyframes line-in {
0% { transform: translateY(-$animation-distance); }
50% { transform: translateY(0); }
100% { transform: rotate(-135deg); }
}
#keyframes line-out {
0% { transform: rotate(-135deg); }
50% { transform: translateY(0); }
100% { transform: translateY(-$animation-distance); }
}
.container {
margin: 10rem auto 0;
width: $width-height;
height: $width-height;
position: relative;
border: 1px solid black;
&.active {
.line {
animation-name: line-in;
animation-direction: normal;
}
}
}
.line {
width: 100%;
height: $line-width;
position: absolute;
top: 45%;
background-color: orange;
animation-direction: normal;
animation-name: line-out;
animation-duration: $duration;
animation-fill-mode: forwards;
}
When I change the "active" animation to following, animations in both directions stop working.
&.active {
.line {
animation-name: line-out;
animation-direction: reverse;
}
}
I believe it has something to do with using the same animation because if I just set the animation-direction: reverse and use animation-name: line-in, it correctly plays the line-in animation in reverse.
Very good question. You have already noticed that animation-direction: reverse; does work. You where very close to figuring out this css quirkiness all by yourself.
There are some additional rules to take note off.
When removing/replacing a css animation, the animation will start from 0%,
When you set reverse (while not changing the actual animation), the animation will continue from whatever % it was at.
So when you clicked the element and set the line-out animation:
The animation will start from 0%
Play in whatever direction you've set.
When only applying a new animation direction:
The animation continous from whatever percentage it was, eg, 100%.
You can restart the animation with several forms of trickery. you'll see that the animation is being played in reverse when the element is recreated.
var clickFunc =function(e) {
//toggle the state
$(this).toggleClass("active");
//reset the animatino state by cloning and replacing the element.
var newone = this.cloneNode(true);
this.parentNode.replaceChild(newone, this);
// reapply click handler to the cloned element
$(newone).click(clickFunc)
}
$(function() {
$(".question").click(function() {
$(this).toggleClass("active");
});
$(".answer").click(clickFunc);
$(".restart").click(function() {
$(".line").each(function() {
var newone = this.cloneNode(true);
this.parentNode.replaceChild(newone, this);
});
});
});
#keyframes line-in {
0% {
transform: translateY(-45px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotate(-135deg);
}
}
#keyframes line-out {
0% {
transform: rotate(-135deg);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-45px);
}
}
.line {
width: 100%;
height: 10%;
position: absolute;
top: 45%;
background-color: orange;
animation-direction: normal;
animation-name: line-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.container {
margin: 1rem auto 0;
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
.container.reverse .line {
animation-name: line-in;
animation-direction: reverse;
}
.container.active .line {
animation-name: line-in;
animation-direction: reverse;
}
.container.active.reverse .line {
animation-name:line-in;
animation-direction: normal;
}
.container.out.active .line {
animation-name: line-out;
animation-direction: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="restart">reset animation state</button><br>
in -out
<div class="container question out">
<div class="line"></div>
</div>
active reversed
<div class="container question">
<div class="line"></div>
</div>
<br>
workaround
<div class="container answer reverse">
<div class="line"></div>
</div>
In order to debug this. You can inspect the animation states in the web dev tools of your browser:
With regards to your refactor:
I would rather have multiple animations in different directions, than doing js tricks in order to restart/reverse an animation.
Depending on how complicated your animation is, you might be better of using css transitions as opposed to animation frames. You would not have to worry about reversing/resetting the animation.
I'm building something that is using the css slide animation to have some text slide in when the text display is set to "block", but I was wondering how I would go about doing the reverse (sliding it out) when it is set to "none"? Is it possible to slide in and slide out with CSS animations, or would I have to use Javascript?
Hope that makes sense! Let me know if you have any questions!
JSfiddle of give you a better idea https://jsfiddle.net/qjwqL236/
Thanks!
And code below:
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").style.display = "block";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").style.display = "none";
}
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
display:none;
position: relative;
left: -300px;
animation: slide 0.5sforwards;
-webkit-animation: slide 0.5s forwards;
}
#-webkit-keyframes slide {
100% {
left: 0;
}
}
#keyframes slide {
100% {
left: 0;
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
In your case. It's easier to use transition than animation. This is how it works.
Everytime the button is click. It changes the value of the left property.
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
CSS
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
position: relative;
left: -400px;
transition: all 0.3s linear
}
#in-button, #out-button{
float:left;
}
JS
var tC = document.getElementById('text-container');
document.getElementById("in-button").onclick = function(){
tC.style.left = '0';
}
document.getElementById("out-button").onclick = function(){
tC.style.left = '-400px';
}
Working fiddle: https://jsfiddle.net/qjwqL236/1/
You should use css translate because it's more performant than positioning and then you need an animation in and an animation out that you can trigger with a class change instead of the display property.
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").className = "in";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").className = "out";
}
#text-container{
height: 30px;
width: 300px;
color: white;
background-color: blue;
transform: translateX(-310px);
}
#text-container.in {
animation: in 0.5s both;
-webkit-animation: in 0.5s both;
}
#text-container.out {
animation: out 0.5s both;
-webkit-animation: out 0.5s both;
}
#-webkit-keyframes in {
100% {
transform: translateX(0);
}
}
#keyframes in {
100% {
transform: translateX(0);
}
}
#-webkit-keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
Here is what you can do using animations. You need to create a slide-out animation just like you have a slide-in.
Note that it won't slide in/out automatically when you change the display to none or block.
document.getElementById("in-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-in');
}
document.getElementById("out-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-out');
}
#text-container {
height: 30px;
width: 300px;
color: white;
background-color: blue;
float: left;
position: relative;
left: -300px;
}
.slide-in {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
}
#-webkit-keyframes slide-in {
100% {
left: 0;
}
}
#keyframes slide-in {
100% {
left: 0;
}
}
#-webkit-keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#in-button {
float: left;
}
#out-button {
float: left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
I want to add 2 transition transforms
But I want to start the second transform after the end of the first transform
the element should go to a point slowly and after that it should go to another point
transform: translate(0%, 300%), translate(15%, -136%);
You cannot do this with just a single element using transition because when you put more than one translate within the transform, the transform property on the whole is transitioned and not one by one.
With pure CSS transition using an extra wrapper element:
If you add an extra wrapper element around the actual element and put one of the transforms on the wrapper element you could achieve the effect that you are looking for. It would also produce the exact reverse effect on the hover out (hover the body and hover out in the below snippet).
.wrapper {
position: relative;
height: 100px;
width: 100px;
transition: all 1s 1s;
}
.content {
position: absolute;
height: 100%;
width: 100%;
border: 1px solid;
transition: all 1s;
}
body:hover .content {
transform: translate(15%, -136%);
transition: all 1s 1s;
}
body:hover > .wrapper {
transform: translate(0%, 300%);
transition: all 1s;
}
body {
min-height: 100vh;
}
<div class='wrapper'>
<div class='content'>Some text</div>
</div>
Transition with a bit of JS/jQuery without any extra elements:
If you add an extra wrapper element around the actual element and put one of the transforms on the wrapper element you could achieve the effect that you are looking for. It would also produce the exact reverse effect on the hover out (hover the body and hover out in the below snippet).
$(document).ready(function() {
var isHover; /* variable to track state */
$('body').hover(function() {
isHover = !isHover; /* invert the state */
$('.content').css('transform', 'translate(0%, 300%)');
}, function() {
isHover = !isHover; /* invert the state */
$('.content').css('transform', 'translate(0%, 300%)');
});
$('.content').on('transitionend', function() {
if (isHover) {
$('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)');
} else {
$('.content').css('transform', 'none');
}
});
});
.content {
height: 100px;
width: 100px;
border: 1px solid;
transition: all 1s;
}
body {
min-height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>
With animation and no extra element:
Using animations this can be done using a single element but the reverse effect is tough to achieve. We would have to write extra code for this and even then it will be complex.
.content {
position: relative;
height: 100px;
width: 100px;
border: 1px solid;
}
body:hover > .content {
animation: move 1s forwards;
}
#keyframes move {
0% {
transform: none;
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: translate(0%, 300%) translate(15%, -136%);
}
}
body {
min-height: 100vh;
}
<div class='content'>Some text</div>
Animations with reverse effect:
Below is a snippet which produces the reverse effect also using CSS animations. But as you can see it is a bit complex. We can do this using a single animation also but it would become more complex.
$(document).ready(function() {
$('body').hover(function() {
$('.content').css('transform', 'none');
$('.content').removeClass('hover-out').addClass('hover-in');
}, function() {
$('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)'); /* as soon as an animation is removed, the element would snap back to original state, to avoid that we have to add final state via inline style */
$('.content').removeClass('hover-in').addClass('hover-out');
});
});
.content {
height: 100px;
width: 100px;
border: 1px solid;
}
.hover-in {
animation: hover-in 1s forwards;
}
.hover-out {
animation: hover-out 1s forwards;
}
#keyframes hover-in {
0% {
transform: none;
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: translate(0%, 300%) translate(15%, -136%);
}
}
#keyframes hover-out {
0% {
transform: translate(0%, 300%) translate(15%, -136%);
}
50% {
transform: translate(0%, 300%);
}
100% {
transform: none;
}
}
body {
min-height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>
I have a div in which I animate the content:
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
}
<div id="container">
<div id="content"></div>
</div>
On hover, the content slides into the container div.
When I refresh the page and the page loads, the #content's animDown animation will run, and I'd prefer it to run only after a hover event.
Is there a way to do this pure CSS, or I have to figure something out in JS?
http://jsfiddle.net/d0yhve8y/
I always set preload class to body with animation time value 0 and its working pretty well. I have some back going transitions so I have to remove load animation to them too. I solved this by temporary setting animation time to 0. You can change transitions to match yours.
HTML
... <body class="preload">...
CSS is setting animation to 0s
body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}
JS will remove class after some delay so animations can happen in normal time :)
setTimeout(function(){
document.body.className="";
},500);
Solution 1 - Add down animation on first hover
Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.
This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.
;(function(){
var c = document.getElementById('container');
function addAnim() {
c.classList.add('animated')
// remove the listener, no longer needed
c.removeEventListener('mouseover', addAnim);
};
// listen to mouseover for the container
c.addEventListener('mouseover', addAnim);
})();
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solution 2 - play animation hidden
Another way around this is to initially hide the element, make sure the animation plays while it is hidden, then make it visible. The downside of this is that the timing could be slightly off and it is made visible too early, and also the hover isn't available straight away.
This requires some Javascript which waits for the length of the animation and only then makes #content visible. This means you also need to set the initial opacity to 0 so it doesn't appear on load and also remove the visibility from the keyframes - these aren't doing anything anyway:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById('content').style.visibility = 'visible';
}, 1100);
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
visibility:hidden;
-webkit-animation:animDown 1s ease;
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solution 3 - Use transitions
In your scenario, you can make this CSS only by replacing the keyframes with a transition instead, so it starts with opacity:0 and just the hover has a change in opacity and the transform:
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
<div id="container">
<div id="content"></div>
</div>
Is there a way to do this pure CSS ?
Yes, absolutely : See the fork http://jsfiddle.net/5r32Lsme/2/
There is really no need for JS.
and I'd prefer it to run only after a hover event.
So you need to tell CSS what happens when it is NOT a hover event as well - in your example :
#container:not(:hover) #content {
visibility: hidden;
transition: visibility 0.01s 1s;
}
But there are two things to note:
1) The transition delay above should match your animation duration
2) You can't use the property which you use to hide the animation onLoad in the animation.
If you do need visibility in the animation, hide the animation initially like e.g.
#container:not(:hover) #content {
top: -8000px;
transition: top 0.01s 1s;
}
A sidenote:
It is recommended to put native CSS properties after prefixed ones, so it should be
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
and now there is a native transform
-webkit-transform: translateY(0);
transform: translateY(0);
If you're looking at this after 2019, a better solution is this:
let div = document.querySelector('div')
document.addEventListener('DOMContentLoaded', () => {
// Adding timeout to simulate the loading of the page
setTimeout(() => {
div.classList.remove('prevent-animation')
}, 2000)
document.querySelector('button').addEventListener('click', () => {
if(div.classList.contains('after')) {
div.classList.remove('after')
} else {
div.classList.add('after')
}
})
})
div {
background-color: purple;
height: 150px;
width: 150px;
}
.animated-class {
animation: animationName 2000ms;
}
.animated-class.prevent-animation {
animation-duration: 0ms;
}
.animated-class.after {
animation: animation2 2000ms;
background-color: orange;
}
#keyframes animationName {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: purple;
}
}
#keyframes animation2 {
0% {
background-color: salmon;
}
50% {
background-color: green;
}
100% {
background-color: orange;
}
}
<div class="animated-class prevent-animation"></div>
<button id="btn">Toggle between animations</button>
Having had to solve a similar challenge, a neat CSS-only trick morewry posted already back in 2013 is to create an animation that initially is in a paused play-state on a keyframe hiding the element:
#content {
animation:animDown 1s ease, hasHovered 1ms paused;
animation-fill-mode: forwards; /* for both animations! */
}
#container:hover #content {
animation:animUp 1s ease, hasHovered 1ms;
}
/* hide #content element until #container has been hovered over */
#keyframes hasHovered {
0% { visibility: hidden; } /* property has to be removed */
100% { visibility: visible; } /* from the other animations! */
}
When hovering, the very brief animated transformation is applied and stays in the 100%-keyframe-state even after mouse-leave thanks to the animation-fill-mode.
For how to set animation sub-properties with multiple animations, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values
This is not pure CSS but maybe someone will stumble across this thread as I did:
In React I solved this by setting a temporary class in ComponentDidMount() like so:
componentDidMount = () => {
document.getElementById("myContainer").className =
"myContainer pageload";
};
and then in css:
.myContainer.pageload {
animation: none;
}
.myContainer.pageload * {
animation: none;
}
If you are not familiar the " *" (n.b. the space) above means that it applies to all descendents of the element as well. The space means all descendents and the asterisk is a wildcard operator that refers to all types of elements.
It's always better a solution without relying on javascript.
The ones with CSS mentioned here are ok. The idea of hiding when not on mouse hover is fine for some situations, but I noticed that if I wanted the animation to happen when the mouse moves out of the element, it wouldn't happen because of the :not(:hover) rule.
The solution I came up worked best for me, by adding a animation to the parent element, that only adds opacity at the end with the same duration. Easier shown than explain:
I grabbed the fiddle made by #sebilasse and #9000 and I added the below code there:
https://jsfiddle.net/marcosrego/vqo3sr8z/2/
#container{
animation: animShow 1s forwards;
}
#keyframes animShow {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Rotation animation that (appears) not to run until needed.
The CSS below allows for up and down arrows for showing menu items.
The animation does not appear to run on page load, but it really does.
#keyframes rotateDown {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
#keyframes rotateUp {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
div.menu input[type='checkbox'] + label.menu::before {
display :inline-block;
content : "▼";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type='checkbox']:checked + label.menu::before {
display : inline-block;
content : "▲";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type='checkbox'] + label.menu {
display : inline-block;
animation-name : rotateDown;
animation-duration : 1ms;
}
div.menu input[type='checkbox']:checked + label.menu {
display : inline-block;
animation-name : rotateUp;
animation-duration : 1ms;
}
div.menu input[type='checkbox'] + label.menu:hover {
animation-duration : 500ms;
}
div.menu input[type='checkbox']:checked + label.menu:hover {
animation-duration : 500ms;
}
From top to bottom:
Create the rotations. For this there are two... one for the down arrow and one for the up arrow. Two arrows are needed, because, after the rotation, they return to their natural state. So, the down arrow starts up and rotates down, while the up arrow starts down and rotates up.
Create the little arrows. This is a straight forward implementation of ::before
We put the animation on the label. There is nothing special, there, except that the animation duration is 1ms.
The mouse drives the animation speed. When the mouse hovers over the element, the animation-duration is set to enough time to seem smooth.
Working on my site
Building off of Tominator's answer, in React, you can apply it per component like so:
import React, { Component } from 'react'
export default class MyThing extends Component {
constructor(props) {
super(props);
this.state = {
preloadClassName: 'preload'
}
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.preloadClassName !== this.state.preloadClassName;
}
componentDidUpdate() {
this.setState({ preloadClassName: null });
}
render() {
const { preloadClassName } = this.state;
return (
<div className={`animation-class ${preloadClassName}`}>
<p>Hello World!</p>
</div>
)
}
}
and the css class:
.preload * {
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}