How to cut the slide transition animation time in half?
I want to reduce the delay of animations between slides
css
.container_slider_css {
margin: 50px auto;
width: 1427px;
height: 200px;
overflow: hidden;
position: relative;
}
.photo_slider_css {
position: absolute;
animation: round 9s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 6s;
}
img:nth-child(2) {
animation-delay: 3s;
}
img:nth-child(3) {
animation-delay: 0s;
}
html
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
The slider is built in such a way that each image is animated with a time delay relative to the others. By cutting the overall animation time and delay time in half, we make transitions faster.
.container_slider_css {
margin: 50px auto;
width: 1427px;
height: 200px;
overflow: hidden;
position: relative;
}
.photo_slider_css {
position: absolute;
animation: round 9s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
27% {
opacity: 1;
}
37% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 6s;
}
img:nth-child(2) {
animation-delay: 3s;
}
img:nth-child(3) {
animation-delay: 0s;
}
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
Related
I'm hiding an element which holds text with position absolute since some screen readers won't read it if the opacity is zero. I want to use a fade in animation like the first box, so I used a simple animation function, but I can't get the fade out animation to work. Do you guys know why?
Thanks in advance!
p {
color: red;
}
.card {
position: relative;
width: 100px;
height: 100px;
text-align: center;
border: 2px solid red;
}
.card.using-opacity .text-container {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card.using-opacity:hover .text-container {
opacity: 1;
}
.card.using-position-absolute .text-container {
position: absolute;
top: -9999px;
left: -9999px;
width: 100%;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
.card.using-position-absolute:hover .text-container {
top: 0px;
left: 0px;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<p>This is how it's supposed to work in terms of animation/transition but it's not accessible</p>
<div class="card using-opacity">
<div class="text-container">
<p>Some text</p>
</div>
</div>
<p>This is accessible, but I can't get the mouse out animated</p>
<div class="card using-position-absolute">
<div class="text-container">
<p>Some text</p>
</div>
</div>
My circle animation looks stretched out? How can I make the circle not look elongated in the x axis? It stretches out during the animation and then returns back to normal after the animation has finished.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
Well, you are animating your width from 300% to 100%. Removing this will fix it.
p {
animation-duration: 3s;
animation-name: slidein;
}
.ball {
border-radius: 50%;
background: blue;
height: 50px;
width: 50px;
display: inline-block;
animation-duration: 3s;
animation-name: slidein;
}
.animation-container {
overflow: hidden;
}
#keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
<div class="animation-container">
<p>hello world</p>
</div>
<div class="animation-container">
<div class="ball"></div>
</div>
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I need to stop animation on hover for the following Codepen project.
I though that adding
.photo:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
could be enough, but it works only for visible image while for other three animation continues in background.
how can I solve?
Thanks for reading
You should use the :hover pseudo class on .container instead, then pause the animation on all of .photo
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round 16s infinite;
opacity: 0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(4) {
animation-delay: 0s;
}
.container:hover .photo {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
Just curious to know why this simple animation delay wont seem to work. I just want a delay of 7s before the fade in of the element. Very simple im sure but been looking at it for to long now.
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
animation-delay: 7s;
-webkit-animation-delay: 7s;
animation: fadein 2s linear;
-webkit-animation: fadein 2s linear;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Put the animation delay after the animation, because the delay needs to be attached to the animation in question(the order is important):
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
-webkit-animation: fadein 2s linear;
animation: fadein 2s linear;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Or using a shorthand way, remove animation-delay: 7s; and -webkit-animation-delay: 7s; and add the delay time to the animation properties like this:
-webkit-animation:fadein 2s linear 7s;
animation:fadein 2s linear 7s;
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
-webkit-animation: fadein 2s linear 7s;
animation: fadein 2s linear 7s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Try using the long-form animation properties:
animation-delay
animation-name
animation-duration
animation-timing-function
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
opacity: 0;
-webkit-animation-delay: 7s;
-webkit-animation-name: fadein;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-delay: 7s;
animation-name: fadein;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>
This code below works I set the initial opacity of the box to 0 so it "fades in" also the animation delay property seems to work only if you state it after the animation itself. I also added animation-fill-mode: forwards; to keep the box being displayed after the animation.
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
animation: fadein 2s linear;
-webkit-animation: fadein 2s linear;
animation-delay: 7s;
-webkit-animation-delay: 7s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>