I have two images I'd like to alternate between. I'd like to have one image fade out completely, then have the second image fade in. I'd like the two images to cycle like the infinitely.
You can pretty easily achieve this, by using keyframes for your opacity and by giving your second image an animation-delay of half the time your animation takes.
.fadein {
position:absolute;
top:0px;
}
.fadein img {
opacity: 0;
position:absolute;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#f2 {
animation-delay: 3s;
}
<div class="fadein">
<img src="https://dummyimage.com/600x400/000/fff" id="f1">
<img src="https://dummyimage.com/600x400/abc/fff" id="f2">
</div>
Related
it runs great on desktop but so janky on mobile :( sorry can't show you the result bcs I can't get permission TT_TT basically the animation is about having objects in 3D context of one perspective flying through z-index to your direction (and gets blurry when nearer)
I suspect it might have something to do with moving thousands of pixels? :(
How can I improve performance for mobile? Thanks!
HTML:
`
<template>
<div :class="{'js-loading': !hasLoaded}">
<img class="circle-bg" src="../assets/scene2-coins/circle-big-bg.svg" alt="circle-bg" #load="onImgLoad">
<img class="circle-bg--2" src="../assets/scene2-coins/circle-big-bg.svg" alt="circle-bg--2" #load="onImgLoad">
<img class="coin-silver" src="../assets/scene2-coins/coin-silver.svg" alt="coin-silver" #load="onImgLoad">
<img class="stars" src="../assets/scene2-coins/stars.svg" alt="stars" #load="onImgLoad">
<img class="confetti" src="../assets/scene2-coins/confetti.svg" alt="confetti" #load="onImgLoad">
<img class="confetti--2" src="../assets/scene2-coins/confetti.svg" alt="confetti--2" #load="onImgLoad">
<img class="coin-platinum" src="../assets/scene2-coins/coin-platinum.svg" alt="coin-platinum" #load="onImgLoad">
<img class="coin-gold" src="../assets/scene2-coins/coin-gold.svg" alt="coin-gold" #load="onImgLoad">
<img class="coin-diamond" src="../assets/scene2-coins/coin-diamond.svg" alt="coin-diamond" #load="onImgLoad">
</div>
</template>
`
SCSS:
`
<style lang="scss" scoped>
.js-loading *,
.js-loading *:before,
.js-loading *:after {
animation-play-state: paused !important;
}
div {
display: flex;
justify-content: center;
align-items: center;
perspective: 500px;
perspective-origin: 50% 50%;
img {
position: inherit;
display: block;
}
///////////////////////////// BACKGROUND
.circle-bg {
min-width: 1200px;
min-height: 1200px;
// animation: circle-bg 1000ms linear both 2000ms;
animation-name: circle-bg;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes circle-bg {
0% { transform: rotate(180deg) scale3D(.65); }
25% { transform: rotate(180deg) scale3D(.7375); }
50% { transform: rotate(180deg) scale3D(.825); }
75% { transform: rotate(180deg) scale3D(.9125); }
100% { transform: rotate(180deg) scale3D(1); }
}
.circle-bg--2 {
min-width: 1500px;
min-height: 1500px;
// animation: circle-bg--2 1500ms linear both 2000ms;
animation-name: circle-bg--2;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes circle-bg--2 {
0% { transform: translate3D(0, 0, -3000px); }
25% { transform: translate3D(0, 0, -2250px); }
50% { transform: translate3D(0, 0, -1500px); }
75% { transform: translate3D(0, 0, -750px); }
100% { transform: translate3D(0, 0, 0px); }
}
///////////////////////////// STARS & CONFETTI
.stars {
// animation: stars 1500ms linear both 2000ms;
animation-name: stars;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes stars {
0% { transform: translateZ(-500px); }
100% { transform: translateZ(500px); }
}
.confetti {
width: 50px;
height: 50px;
top: 120px;
left: 250px;
// animation: confetti 1500ms linear both 2000ms;
animation-name: confetti;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes confetti {
0% { transform: translateZ(-500px); filter: blur(0px); }
100% { transform: translateZ(500px); filter: blur(2px); }
}
.confetti--2 {
width: 100px;
height: 100px;
top: 480px;
left: 20px;
// animation: confetti--2 1500ms linear both 2000ms;
animation-name: confetti--2;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes confetti--2 {
0% { transform: skew(-20deg, 10deg) translateZ(-500px); filter: blur(0px); }
100% { transform: skew(-20deg, 10deg) translateZ(500px); filter: blur(2px); }
}
///////////////////////////// COINS
#mixin all-coins {
width: 100px;
height: 100px;
}
.coin-diamond {
#include all-coins;
top: 330px;
left: 180px;
// animation: coin-diamond 1500ms linear both 2000ms;
animation-name: coin-diamond;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-diamond {
0% { transform: rotate(-45deg) translateZ(100px); filter: blur(0px); }
100% { transform: rotate(20deg) translateZ(1100px); filter: blur(5px); }
}
.coin-gold {
#include all-coins;
top: 300px;
left: 50px;
// animation: coin-gold 1500ms linear both 2000ms;
animation-name: coin-gold;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-gold {
0% { transform: rotate(20deg) translateZ(-100px); filter: blur(0px); }
100% { transform: rotate(-40deg) translateZ(900px); filter: blur(4px); }
}
.coin-platinum {
#include all-coins;
top: 220px;
left: 200px;
// animation: coin-platinum 1500ms linear both 2000ms;
animation-name: coin-platinum;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-platinum {
0% { transform: rotate(20deg) translateZ(-300px); filter: blur(0px); }
100% { transform: rotate(60deg) translateZ(700px); filter: blur(3px); }
}
.coin-silver {
#include all-coins;
top: 180px;
left: 50px;
// animation: coin-silver 1500ms linear both 2000ms;
animation-name: coin-silver;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-silver {
0% { transform: rotate(0deg) translateZ(-500px); filter: blur(0px); }
100% { transform: rotate(60deg) translateZ(500px); filter: blur(2px); }
}
}
</style>
`
I've tried to optimize by adding several trick code:
display block on all
not using shorthand animation
using class animation paused until img #load is true
have tried to use will-change, but later deleted it since somebody said it's better to be used in JS - now using translate3D and scale3D (on some, haven't changed the rest of the code)
using more than 2 keyframes (on some, haven't changed the rest of the code)
btw all assets are compressed under 100kb
I suspect is the blur animation, filter blur is a GPU destroyer when you abuse of that. Hope it helps!
in the example below:
wrap should be initially hidden
after one second - in should be outside of page
next second - it should go into page
finishing animation - it should stay visible - and here is the problem - it goes hidden
If I remove visibility:hidden at start - it is visible the first second - that's not allowed
how to do this ?
.wrap{
visibility:hidden; width:54px; height:54px; background:orange;
}
.wrap{animation: wrap 1s; animation-delay:1s}
#keyframes wrap{
0% {transform: translateX(-300px); visibility:visible}
100% {transform: translateX(0);}
}
<div class='wrap'></div>
This is happens, when the animation finished, the swap class gets its initial value from itself. To solve this you need add in the last keyframe (100%) visibility: visible; and also add animation-fill-mode: forwards; to stop the animation on the last keyframe.
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
<div class="wrap"></div>
I have created a transition to be run between route changes:
.page-enter-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: slideScaleRight 2s ease;
}
.page-leave-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: scaleSlideRight 2s ease;
}
#keyframes scaleSlideRight {
0% {
transform: scale(1);
}
33% {
transform: scale(0.75) translateX(0);
opacity: 0.5;
}
66% {
transform: scale(0.75) translateX(150%);
}
100% {
transform: scale(0.75) translateX(150%);
}
}
#keyframes slideScaleRight {
0% {
transform: scale(0.75) translateX(-150%);
}
33% {
transform: scale(0.75) translateX(-150%);
}
66% {
opacity: 0.5;
transform: scale(0.75) translateX(0);
}
100% {
transform: scale(1) translateX(0);
}
}
The transition run smooth but I just discover that if the page is not at top position, before leaving, nuxt force an scroll to the top making the experience really bad...
I can guess nuxt is scrolling up before triggering the transition and I really would like to keep the page where it is before leaving.
Any ideas?
You could set scrollToTop: false on an upper page (or even in /layouts/default.vue?) to prevent the scrolling of the page as shown in the documentation.
If you want more granularity, you could also look into scrollBehavior.
I'm using au-animate in each view to make a page transition:
the current view slides left out (from center to left) and the next view slides left in (from right to center).
#keyframes slideLeftIn {
0% {transform: translate(100%, 0);}
100% {transform: translate(0, 0);}
}
#keyframes slideLeftOut {
0% {transform: translate(0, 0);}
100% {transform: translate(-100%, 0);}
}
.pages.au-enter-active {
animation: slideLeftIn 0.8s;
}
.pages.au-leave-active {
animation: slideLeftOut 0.8s;
}
Based on: Aurelia router view animation with swap-order="with"
Now, I need to have both views in the DOM during the transition, like in W3 slide.
Is there a way to achieve this in aurelia?
UPDATE:
It appears to be a bug preventing this:
error aurelia-templating-router 1.0.1 with swap-order
UPDATE2:
In the last release this bug was fixed! Aurelia rocks.
#keyframes slideLeftIn {
0% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0); }
100% {
-webkit-transform: none;
transform: none; } }
#keyframes slideLeftOut {
0% {
-webkit-transform: none;
transform: none; }
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0); } }
i have Jssor Slider , i want to make the 2 arrows left and right appear and display with fadein and fadeout
- when mouse over the 2 arrow fadein
- when mouse out the 2 arrows fadeout
any suggestion
thanks
Given there is an arrow navigator skin 'skin\arrow-01.source.html', please add following css code to to this job.
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
And finally you will get the following arrow navigator skin,
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 01 css */
/*
.jssora01l (normal)
.jssora01r (normal)
.jssora01l:hover (normal mouseover)
.jssora01r:hover (normal mouseover)
.jssora01ldn (mousedown)
.jssora01rdn (mousedown)
*/
.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a01.png) no-repeat;
overflow:hidden;
}
.jssora01l { background-position: -8px -38px; }
.jssora01r { background-position: -68px -38px; }
.jssora01l:hover { background-position: -128px -38px; }
.jssora01r:hover { background-position: -188px -38px; }
.jssora01ldn { background-position: -8px -38px; }
.jssora01rdn { background-position: -68px -38px; }
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->