We Keep Coding

How to apply transition on transform translateX

How I can apply a transition on transform: translateX CSS property in Vue?
I've tried in this way but it doesn't work, I want to have a smooth slide in/out effect when the menu is opened or closed. I'm using Vue and Bootstrap.
<transition name="slide">
<div class="collapse navbar-collapse position-fixed" :class="{ 'show': isVisible }" ref="menuLinks">
<ul class="navbar-nav ml-auto">
<li class="nav-item" v-for="(item, index) in items" :key="index">
<a class="nav-link" :href="item.link">{{ item.title }}</a>
</li>
</ul>
</div>
</transition>
//CSS
.navbar-collapse {
top: 0;
left: 0;
height: 100vh;
width: 25%;
background:white;
right: 0;
padding: 2em;
transition: transform 1s linear;
}
.slide-enter-active, .slide-enter {
//to do animation soft
transition: transform 1s linear;
animation: slideIn;
animation-duration: 1s;
}
.slide-leave-active, .slide-leave-to {
transition: transform 1s linear;
animation: slideOut;
animation-duration: 1s;
}
#keyframes slideIn {
from {
transform: transaletX(-100%);
}
to {
transform: transaletX(0);
}
}
#keyframes slideOut {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
UPDATE
I've removed the transition from .slide-leave-active as suggested but nothing change
.slide-enter-active, .slide-enter {
transition: transform 1s ease-in-out;
animation: slideIn;
animation-duration: 1s;
}
.slide-leave-active, .slide-leave-to {
animation: slideOut;
animation-duration: 1s;
}

How can I optimize this CSS code for Android & IOS?

I have a test web app, trying different CSS solutions. I used the below CSS code as a background animation in my Ionic project.
Unfortunately, the code on Android stutters quite badly, and the low fps makes other functions in my app unusable & unstable. Please also find the original code link below.
Original code:
https://codepen.io/noahblon/pen/GKflw
I tried optimizing the code as per below to use hardware acceleration in app.
HTML Code
<div class="scene">
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
</div>
CSS Code:
Picture is locally stored as asset & is 800x400, 100KB.
.wall {
background-image: url('../assets/imgs/4.jpg');
background-size: cover;
//pointer-events: none;
position: absolute;
}
.scene {
// left: 50%; top: 50%;
left: 50%; top: 50%;
display: inline-block;
vertical-align: middle;
perspective: 5px;
// perspective-origin: 50% 50%;
position: absolute;
z-index: -10;
}
.wrap {
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
-webkit-animation: move 350s infinite linear;
-webkit-animation-fill-mode: forwards;
}
.wrap:nth-child(2){
-webkit-animation: move 350s infinite linear;
animation-delay: 6s;
}
.wall{
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
opacity: 0;
//animation: fade 350s infinite linear;
-webkit-animation: fade 350s infinite linear;
// -webkit-animation: fadeinout 4s linear forwards;
// animation: fadeinout 4s linear forwards;
animation-delay: 0;
}
.wrap:nth-child(2) .wall {
animation-delay: 6s;
}
.wall-right {
transform: rotate3d(0,1,0,90deg) translate3d(0,0,500px);
}
.wall-left {
transform: rotate3d(0,1,0,-90deg) translate3d(0,0,500px);
}
.wall-top {
transform: rotate3d(1,0,0,90deg) translate3d(0,0,500px);
}
.wall-bottom {
transform: rotate3d(1,0,0,-90deg) translate3d(0,0,500px);
}
.wall-back {
transform: rotate3d(1,0,0,180deg) translate3d(0,0,500px);
}
#-webkit-keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#-webkit-keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
I am seeking a solution in optimizing the link provided or further using my edited code.
How would you optimize this animation for phone?

Detect css animation stop

I have a spaceship object in my website that moves to left to right(end to the view port) in the screen.
I need to show another spaceship object moves right to left once that above mentioned spaceship object reach to end(screen view port).
The problem
I tried to give second spaceship object "animation delay" but it's not working as I wanted. Because browser width different from screen to screen.
Here is my code.
.spaceship-1 img {
width: 100px;
animation: spaceship-1 10s ease-in-out 1;
animation-fill-mode: forwards;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vw);
}
}
.spaceship-2 img {
width: 100px;
animation: spaceship-2 10s ease-in-out 1;
animation-fill-mode: forwards;
animation-delay: 5s;
position: absolute;
right: 0;
bottom: 15px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i68.tinypic.com/2lsxjpx.png" alt="">
</div>
Here is the Jsfiddle Any ideas?

If you want the second animation to start right after the first one, you have to set an animation-delay equal to the animation-duration of the first one, witch is 10s.
And also you should make both of them absolute.
body{
background:#f6f6f6;
overflow-x:hidden;
}
.spaceship-1 img{
width:100px;
animation: spaceship-1 10s ease-in-out 1 ;
animation-fill-mode: forwards;
position:absolute;
left: 0;
top: 10px;
}
#-webkit-keyframes spaceship-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw - 100px)) ;
}
}
.spaceship-2 img{
width:100px;
animation: spaceship-2 10s ease-in-out 1 ;
animation-fill-mode: forwards;
animation-delay:10s;
position:absolute;
transform: rotate(180deg);
right: 0;
bottom: 10px;
}
#-webkit-keyframes spaceship-2 {
0% {
transform: translateX(0) rotate(180deg);
}
100% {
transform: translateX(calc(-100vw + 100px)) rotate(180deg);
}
}
<div class="spaceship-1">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
<img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
The fiddle : https://jsfiddle.net/sph8f6ty/

Hover animation reverts to beginning after animation is finished

Example here:
https://codepen.io/rfehre/pen/mKryEV
CSS
.intro-side3.out {
animation-name: out;
animation-duration: 2s;
}
.intro-side3.over {
animation-name: in;
animation-duration: 2s;
}
#-webkit-keyframes out {
0%{background-position:100% 49%}
100%{background-position:0% 52%}
}
#-webkit-keyframes in {
0%{background-position:0% 52%}
100%{background-position:100% 49%}
}
Javascript
$('.intro-side3').hover(
function() {
$(this).removeClass('out').addClass('over');
},
function() {
$(this).removeClass('over').addClass('out');
}
);
I'm trying to do a gradient animation on a hover, and then to reverse that animation when you mouse off. It's not perfect, but for the most part it's working alright. Except that, if you hover for more than the currently assigned 2 seconds, the gradient reverts back to its initial state. I'm not sure why.
I'm probably missing something obvious, right?

use animation-fill-mode: forwards; property
https://codepen.io/anon/pen/BVLyvm
You can achieve the same without javascript
#import url(https://fonts.googleapis.com/css?family=Montserrat:300);
#import url(https://fonts.googleapis.com/css?family=Montserrat:800);
#import url(https://fonts.googleapis.com/css?family=Montserrat:600);
.bold-600 {
font-family: montserrat;
font-weight: 600;
}
.main {
padding-left: 0;
}
.main2 {
padding-left: 0;
padding-top: 10px;
}
.intro-side3 {
padding: 2rem;
height: 400px;
font-size: 24px;
color: white;
font-family: montserrat;
background: linear-gradient(270deg, #662d91, #00aeef, #ec008c);
background-size: 600% 600%;
animation-name: out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.intro-side3:hover {
animation-name: in;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#-webkit-keyframes out {
0% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-webkit-keyframes in {
0% {
background-position: 0% 52%
}
100% {
background-position: 100% 49%
}
}
<div class="main2 col-lg-3 col-md-4">
<h1 style="font-family:montserrat; font-size:24px; padding:20px;">Hover /w Reverse</h2>
<div class="intro-side3 gradientbg">
<div class="inner">
<p>We are here to <span class="bold-600"> do things</span> and <span class="bold-600">also maybe some stuff.</span>
</div>
</div>
</div>

try adding the following property to the CSS
animation-iteration-count: 1;

Animation for carousel with ng-boostrap and Angular 2

I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue).
My question: is there a way to use CSS as a workaround for the animation?
I have put up a plunker that has fade in effect for the carousel, but not fade out.
.carousel-item.active{
-webkit-animation: fadein 1.4s;
-moz-animation: fadein 1.4s;
-ms-animation: fadein 1.4s;
-o-animation: fadein 1.4s;
animation: fadein 1.4s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Is there a way to make a fade out work? I have tried transition but failed.

I wanted a fade in/fade out the transition between slides and found a simpler solution to this:
::ng-deep {
.carousel-item {
transition: opacity 0.7s ease !important;
position: absolute !important;
display: block !important;
opacity: 0;
}
.carousel-item.active {
position: relative !important;
opacity: 1;
}
}
If you don't want to use ::ng-deep (it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components

Alright, answering my own question. The following CSS hack will make the animation work just fine
ngb-carousel {
width: inherit;
height: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active{
opacity: 1;
visibility: visible;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators{
z-index: 20;
}
Working Plunker

I managed to create left-to-right slide animation based on your approach. active slide goes out with transition to the right when it loses .active and then new .active slides in with delayed animation.
though I recommend using ngx-swiper-wrapper instead - best angular carousel I found so far (https://idangero.us/swiper/)
.carousel-inner {
width: 640px;
height: 240px;
}
.carousel-item {
padding: 40px 55px;
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
display: block !important;
}
.carousel-item.active {
z-index: 1;
opacity: 1;
transition-delay: .3s;
transform: none;
animation: slideFromLeft .3s;
animation-delay: .3s;
}
#keyframes slideFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: none;
}
}

Here are two animations I used in Angular 9, ng-bootstrap version 6.0.0. Easiest way is to give an entrance animation to .carousel-item.active. Animations are taken from animista.net/play/entrances. Just make sure you add the css to global styles.css
Animation 1
.carousel-item.active {
-webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
#keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
Animation 2
.carousel-item.active {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
#keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}

Got it to work in angular 7 after tweaking #user3682091 answer
Hope it helps someone else
Here's my html
<div class="section" id="carousel">
<div class="container">
<div class="title">
<h4>Carousel</h4>
</div>
<div class="row justify-content-center" style="height: 50vw;">
<div class="col-12" style="height: 100%; width:100%">
<ngb-carousel>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Nature, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg3.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Somewhere Beyond, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg4.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Yellowstone National Park, United States</h5>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
</div>
Here's my style.css file(global css)
ngb-carousel {
// width: inherit;
// height: inherit;
width: 100%;
height: 100%;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active {
opacity: 1;
visibility: visible;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators {
z-index: 20;
}