CSS Transition - Two Directions

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 the transform 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



Leave a reply



Submit