We Keep Coding

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?

Getting Top/Right values ​from a css-animated element

I'm trying to get the Top and Right values from an element being rotated by a CSS animation, for this I am using the following code:
HTML:
<div id="ball1"> </div>
CSS:
#keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#ball1 {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10;
height: 10;
border-radius: 10px;
}
Javascript:
console.log(window.getComputedStyle(document.getElementById("ball1"), null).top);
console.log(window.getComputedStyle(document.getElementById("ball1"), null).right);
However it returns a value of 0px, I wanted to get the value from Right and Top as if I was manually setting them (and not by the transform animation).
If this is not possible, is there a way to simulate a "circle" rotation and return the right/top values without using the transform?
ie:
https://66.media.tumblr.com/fb22b61bcbca3785a515e86c2276451b/tumblr_inline_pmimnjEvbK1v6q8wn_1280.gif?fbclid=IwAR2zjgE0hfB8emWOg0f6TOcQb8DWGbEvu9IQOr92fMq4HmMKjiAQRQzLmI0

Use getBoundingClientRect():
const ball = document.getElementById("ball");
setInterval(() => {
const rect = ball.getBoundingClientRect();
console.log(rect.top, rect.right);
}, 300);
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#ball {
transform-origin: center right;
animation: spin 2.5s linear 0s infinite forwards;
position: relative;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
<div id="ball"></div>

Here is an approximation using top/left. The trick is to animate each property individually alternating the ease function to simulate the circular path:
.box {
width:100px;
height:100px;
position:relative;
}
#ball1 {
animation:
Atop 2.5s infinite,
Aleft 2.5s infinite;
position: absolute;
background-color: #7883f7;
width: 10px;
height: 10px;
border-radius: 10px;
}
#keyframes Atop {
0%,50%,100% {
top:50%;
animation-timing-function: ease-out;
}
25% {
top:0%;
animation-timing-function: ease-in;
}
75% {
top:100%;
animation-timing-function: ease-in;
}
}
#keyframes Aleft {
0%,100% {
left:0;
animation-timing-function: ease-in;
}
25%,75% {
left:50%;
animation-timing-function: ease-out;
}
50% {
left:100%;
animation-timing-function: ease-in;
}
}
<div class="box">
<div id="ball1"> </div>
</div>

How to apply a hover effect on an element which has already been handled by an forward animation?

I have a text and block in an animation of an SVG element.
Here in my example i simplified everything.
I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.
Any suggestions on how to work around on this one?
I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.
Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
codepen.io link (same code as above): https://codepen.io/jdickel/pen/xJbQrY

Instead of a forwards animation, you can simply set the initial opacity to 0.3.
EDIT:
I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:
.text{
font-weight: bold;
/* Start out at 0.3 */
opacity: 0.3;
transition: all .8s;
/* 2s + 3s = 5s */
animation: showText 5s ease-in-out; /* no forwards */
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
/* Note the new animation keyframe locations */
70% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>

First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>

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;
}

How to play different css animations one after another?

I'm trying to play different css animations one after another but I can't figure out how to.
Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.
Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
And then run another one, show it for 15 seconds and move on.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:
the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...
It will be more clear once you see it in action here:
.animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
animation-duration: 20s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
6% {
opacity: 1;
transform: translateX(30px);
}
8% {
transform: translateX(-10px);
}
10% {
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(0);
}
42% {
opacity: 1;
transform: translateX(30px);
}
55% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
50% {
opacity: 0;
transform: translateY(-2000px);
}
56% {
opacity: 1;
transform: translateY(30px);
}
58% {
transform: translateY(-10px);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
92% {
opacity: 1;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Using animation-delay.
animation: a, b;
animation-duration: 2s, 2s;
animation-delay: 0s, 4s;
The animation b will start after 4s while animation a will start without any delay.

animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.
You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.
var animations=["bounceInLeft","bounceInDown"],
count=animations.length,
classlist=document.querySelector("img").classList,
holder=document.createElement("div"),
style=window.getComputedStyle(holder),
delay=15,
current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
wait=0;
x=0;
while(x<count){
setTimeout(function(a){
classlist.remove(current);
classlist.add(a);
current=a;
},wait*1000,animations[x]);
holder.className=animations[x];
wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
x++;
}
setTimeout(animate,wait*1000);
};
img{
animation-fill-mode:both;
height:200px;
width:300px;
}
.bounceInDown{
animation-duration:1s;
animation-name:bounceInDown;
}
.bounceInLeft{
animation-duration:2s;
animation-name:bounceInLeft;
}
#keyframes bounceInDown{
0%{
opacity:0;
transform:translateY(-2000px);
}
60%{
opacity:1;
transform:translateY(30px);
}
80%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
#keyframes bounceInLeft{
0%{
opacity:0;
transform:translateX(-2000px);
}
60%{
opacity:1;
transform:translateX(30px);
}
80%{
transform:translateX(-10px);
}
100%{
transform:translateX(0);
}
}
<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

I have managed to achieve something similar by adapting this concept by Noah Addy: http://digitalfio.github.io/Stagger.css/
You will need to work on the timings a bit to get the 15sec delay you want, but other than that it should be fairly straightforward.