CSS Transition - two directions?
Here is a simple solution that does not require more HTML or JavaScript:
.box { height: 100px; width: 250px; background: aqua; position: relative; overflow: hidden;}
.overlay { position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; color: white; padding: 10px; left: -270px; margin-left: 520px; bottom: 0; transition: left 300ms linear, margin-left 300ms ease-out;}
.box:hover .overlay { left: 0; margin-left: 0; transition: left 300ms ease-out;}
<div class="box"> <div class="overlay"> Overlay </div></div>
How to make two-way CSS3 animation
If you are going to switch between only this two transform properties. Use transition instead of animation.
.element {
transition:transform .2s ease;
width:30px;
height:30px;
border:1px solid red;
transform: translate3d(0,0,0);
}
.element.is-animated {
transform: translate3d(-100%,0,0);
}
Precisely you should add remove the class is-animated, whenever you want the transition to take place
Make a CSS smooth animation go both ways?
Just place your transition line on the textarea
itself, like this:
textarea
{
width: 1100px;
height: 80px;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
border-color: #000000;
background-color : #000000;
color: #FFFFFF;
opacity: 0.7;
font-family: "Times New Roman";
vertical-align: middle;
-webkit-transition: height 1s;
}
textarea:hover
{
font-weight: bold;
font-size: 31px;
border-radius: 10px;
opacity: 1;
width: 1100px;
height: 310px;
}
This ensures that all height changes (including the mouse out) are applied as animation on the textarea, not just on hover.
DEMO
http://jsfiddle.net/qd4fdfnd/
Is it possible to play an animation in both directions with a single @keyframes rule?
It's because you apply the same animation to the element on hover as the animation that is on the default state of the element.
So the element already had that animation with the default direction but then you apply it again with the reverse. But it won't work. I don't really know why this happens. But applying the same animation on an element twice, won't work. So you need 2 different keyframes.
You can use a reverse
animation or duplicate the existing one and use it with direction: reverse
Read more here
restart animation
more info here
another article here
If you REALLY want to use just 1 animation this can be solved with javascript by removing and adding an 'animate-me' class . But it still wouldn't be ideal
div { width: 100px; height: 100px; animation: fade 0.6s ease-in-out forwards; margin: 15px; display: inline-flex; align-items: center; justify-content: center; color: white;}
#box-1:hover { animation: fade2 0.6s ease-in-out forwards; animation-direction: reverse;}
#box-2:hover { animation: fadeReverse 0.6s ease-in-out forwards;}
@keyframes fade { 0% { background: red; } 100% { background: blue; }}@keyframes fade2 { 0% { background: red; } 100% { background: blue; }}
@keyframes fadeReverse { 0% { background: blue; } 100% { background: red; }}
<div id="box-1">:(</div><div id="box-2">:)</div>
CSS Transition Direction - Can It Always Be The Same?
You can use keyframes
for this, or listen to transitionend
.
const btn = document.querySelector('button'),
cover = document.querySelector('.cover');
btn.addEventListener('click', ()=> {
if(cover.classList.contains('covered')){
cover.classList.add('remove_covered');
} else {
cover.classList.add('covered');
}
cover.ontransitionend = () => {
if(cover.classList.contains('remove_covered'))
cover.classList.remove('covered','remove_covered');
};
});
.child {
width: 300px;
height: 300px;
}
.parent {
position: relative;
width: 300px;
height: 300px;
}
.cover {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #fff;
transition: height 1s ease-in-out;
}
.covered {
height: 100%;
}
.remove_covered {
top: 0;
bottom: auto;
height: 0;
}
<button>Toggle</button>
<div class="parent">
<img class="child" src="https://picsum.photos/200/300">
<div class="cover"></div>
</div>
Make CSS transition-duration work both ways?
It can be done using CSS3 alone. All you need to do is move all transitions to the .box
rule, like this:
.box {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
-webkit-transition: width 2s, border-radius .5s, background-color .5s;
}
.big {
width: 300px;
}
.circle {
background-color: blue;
border-radius: 50px;
}
Moving two lines in opposite directions via CSS3 animations
You could do it with less markup using pseudoelements and display: flex
, like in this example: http://codepen.io/fcalderan/pen/aObYLK
Markup
<h1 class="animateheading">SERVICES</h1>
Css
.animateheading {
width: 100%;
text-align: center;
overflow: hidden;
display: flex;
align-items: center;
}
/* lines */
.animateheading:before,
.animateheading:after {
content: "";
flex-grow: 1;
height: 1px;
min-width: 100px;
border-top: 1px #333 solid;
}
/* animation toward left */
.animateheading:before {
margin-right: .3em;
-webkit-animation: lineleft 3s linear 1s forwards;
-moz-animation: lineleft 3s linear 1s forwards;
animation: lineleft 3s linear 1s forwards;
}
/* animation toward right */
.animateheading:after {
margin-left: .3em;
-webkit-animation: lineright 3s linear 1s forwards;
-moz-animation: lineright 3s linear 1s forwards;
animation: lineright 3s linear 1s forwards;
}
/* keyframes for left animation */
@-webkit-keyframes lineleft {
from { -webkit-transform: translate(0, 0); }
to { -webkit-transform: translate(-100%, 0); }
}
@-moz-keyframes lineleft {
from { -moz-transform: translate(0, 0); }
to { -moz-transform: translate(-100%, 0); }
}
@keyframes lineleft {
from { transform: translate(0, 0); }
to { transform: translate(-100%, 0); }
}
/* keyframes for right animation */
@-webkit-keyframes lineright {
from { -webkit-transform: translate(0, 0); }
to { -webkit-transform: translate(100%, 0); }
}
@-moz-keyframes lineright {
from { -moz-transform: translate(0, 0); }
to { -moz-transform: translate(100%, 0); }
}
@keyframes lineright {
from { transform: translate(0, 0); }
to { transform: translate(100%, 0); }
}
Just some notes about this implementation
Flexbox
position could require several different syntaxes, due to its implementation across browser: see http://caniuse.com/#feat=flexbox; since it is applied on pseudoelements only for styling purpose, a lack of support can be considered as graceful degradation;- This code works with text of any length and on every
viewport
size, since it animates thetransform
property using a percentage value. No matter how many rows will take the text, the lines will be always vertically centered; - Add as many vendor prefixes as you need for the
keyframes
; - The
animation-fill-mode
property is set to forwards so the last animation frame will be retained (and the lines don't come back). - If you need to always see two lines, even for really long texts, set a
min-width
on pseudoelements as I did in the example, otherwise you may safely remove it.
Related Topics
HTMLpurifier with Borderradius
Matrix Scale Transition Not Working
Fixed Position Misbehaviour in Ie11
New Line '\N' Is Not Working in Typescript
What Is The Definition of "The Baseline of Parent Box"
How to Specify a Div's Position as Absolute and Relative at The Same Time
Does a CSS3 Animation Run When Parent Element Has Visibility: Hidden
Variable Height Scrolling Div, Positioned Relative to Variable Height Sibling
How Automatically Adjust Div's Width Using CSS
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
Align Material Icon Vertically
Mobile Safari Text Input Width Bug
Springboot - Resource Interpreted as Stylesheet But Transferred with Mime Type Text/Htm