Just a simple question about keyframes in css and react js. Have 2 types of animations, first one works but second one no
The second example doesn't work even in global css file and in module.css too
The first example:
import React from "react";
const Home = () => {
return (
<div className="section" style={{ background: "transparent" }}>
<h1>HOME</h1>
</div>
);
};
CSS:
.section{
height: 100vh;
width: 100%;
animation-name: delay;
animation-duration: 2s;
z-index: -1;
}
#keyframes delay {
0%{transform: translateY(30px)}
100%{transform: translateY(0)}
}
Second example:
function Wings() {
return (
<div className='wings'>
<div className='rightWing' >
<img src={rightWing} alt="" />
</div>
<div className='leftWing'>
<img src={leftWing} alt="" />
</div>
</div>
);
}
CSS:
.wings{
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.leftWing{
position: absolute;
transform-origin: 85% 5%;
transform: translateX(25%) rotate(90deg);
animation-name: left-wing;
animation-duration: 2sec;
}
.rightWing{
position: absolute;
transform-origin: 15% 5%;
transform: translateX(-25%) rotate(-90deg);
animation-name: right-wing;
animation-duration: 2sec;
}
#keyframes left-wing {
0%{transform: translateX(25%) rotate(90deg);}
50%{transform: rotate(0deg);}
100%{transform: translateX(25%) rotate(90deg);}
}
#keyframes right-wing {
0%{transform: translateX(-25%) rotate(-90deg);}
50%{transform: rotate(0deg);}
100%{transform: translateX(-25%) rotate(-90deg);}
}
So the question is - Why it doesn't work ? :D
UPD: GUYS ! Always set 2s 3s etc NOT 2SEC :D
Related
When my page is loading, the logo animation starts in the bottom right corner of the screen, even though my logo element is positioned absolute. I really don't understand why this is happening and what to do about it.
Here's my code:
HTML:
<div class="intro position-relative">
<header class="company-name border border-5 p-2 p-sm-4 position-absolute start-50 translate-middle">
<h1 class="lh-1">BAKKES</h1>
<h2 class="lh-1">herenkappers en baardkwekers</h2>
</header>
</div>
CSS:
.company-name {
top: 45%;
animation: fade-names 1s linear forwards;
animation-delay: 0.5s;
opacity: 0;
}
#keyframes fade-names {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
Here's a link so you can see what happens: https://amazing-austin-69ee4a.netlify.app/
You can do these codes.
I looked at your website.
.intro .company-name {
top:45%; // remove this
}
.start-50 {
left: 50% !important; // remove this
}
.translate-middle {
-webkit-transform: translate(-50%, -50%) !important; // remove this
transform: translate(-50%, -50%) !important; // remove this
}
.intro {
display: flex; // add this
justify-content: center; // add this
align-items: center; // add this
}
I have a CSS animation, for example, like this:
#keyframes my-animation {
0% { opacity: 0; visibility: visible; transform: scale(0,0); }
50% { transform: scale(1.15, 1.15); }
100% { transform: none; }
}
And I want to apply it to a DIV that has an arbitrary rotation e.g. like this:
<div style="width:100px; height:100px; transform: rotate(45deg)"/>
When I apply the CSS animation, keyframes have another transform attribute that only sets scale. As a result, my DIV is rotated back to 0 during the animation and, at the end, it is restored back to 45 degree rotation.
But I want it to keep its arbitrary original rotation. So the question is: is there a way to specify in transform property of the keyframes that it should keep existing (arbitrary) rotation?
Something like transform: scale(1.15, 1.15) rotate(keep) ?
Use CSS variables
.x {
transform: rotate(var(--r,0deg));
height: 50px;
width: 50px;
display:inline-block;
background: green;
animation: my-animation 5s;
margin: 20px;
}
#keyframes my-animation {
0% {
opacity: 0;
transform: scale(0) rotate(var(--r,0deg));
}
50% {
transform: scale(1.15) rotate(var(--r,0deg));
}
}
<div class="x" style="--r:80deg"></div>
<div class="x" ></div>
<div class="x" style="--r:60deg"></div>
Or like below so you can append any transformation to the one defined in the keyframes
:root {
--r: rotate(0deg); /* Use any null transform (ex: translate(0), skew(0deg), etc)*/
}
.x {
transform: var(--r);
height: 50px;
width: 50px;
display:inline-block;
background: green;
animation: my-animation 5s;
margin: 20px;
}
#keyframes my-animation {
0% {
opacity: 0;
transform: scale(0) var(--r);
}
50% {
transform: scale(1.15) var(--r);
}
}
<div class="x" style="--r:rotate(80deg) skew(20deg)"></div>
<div class="x" ></div>
<div class="x" style="--r:rotate(60deg) translate(20px,20px)"></div>
Here's a simple solution without variables - I would just wrap your div and do the scaling on the wrapper, keeping the inner div rotated arbitrarily. Trivial, but does the trick I think.
.box {
height: 50px;
width: 50px;
background: green;
margin: 50px;
}
.scale-me {
animation: my-animation;
animation-duration: 10s;
}
#keyframes my-animation {
0% {
opacity: 0;
transform: scale(0);
}
50% {
transform: scale(1.15);
}
}
<div class="scale-me">
<div class="box" style="transform: rotate(45deg)"></div>
<div class="box" style="transform: rotate(60deg)"></div>
<div class="box" style="transform: rotate(120deg)"></div>
</div>
I saw this animation on codepen, and I don't know why it's written this way to have this effect, but I think it's going to have the effect of rotating 360deg clockwise, 360deg counterclockwise, instead of bouncing up and down or left and right
I'm particularly puzzled with these Keyframe animation
#keyframes move{
from {
transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
}
to {
transform: rotate(-360deg) translateX(1.125em) rotate(360deg);
}
}
Results the following
https://i.stack.imgur.com/9oWnw.gif
From the specification we can see how the broswer should deal with interpolation between transform values. In this case we use this:
If from- and to-transform have the same number of transform functions,
each transform function pair has either the same name, or is a
derivative of the same primitive: Interpolate each transform function
pair as described in Interpolation of transform functions. The
computed value is the resulting transform function list.
So the browser will change the first rotate from 360deg to -360deg and the same for the last rotate while translateX will kept the same. We will then have the following steps:
transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
transform: rotate(350deg) translateX(1.125em) rotate(-350deg);
transform: rotate(340deg) translateX(1.125em) rotate(-340deg);
....
transform: rotate(0) translateX(1.125em) rotate(0);
....
....
transform: rotate(-360deg) translateX(1.125em) rotate(360deg);
Now we need to understand how rotate(-adeg) translateX(b) rotate(adeg) works. First you may notice that the rotation won't have any visual effect on the element since we deal with a circle, it will simply affect how the translation will work and more precisely it's the first rotation that is important (the one in the left).
.container {
width: 50px;
height: 50px;
margin: 50px;
border:2px solid;
}
.box {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
animation: move 2s linear infinite;
}
.alt {
animation: move-alt 2s linear infinite;
}
#keyframes move {
from {
transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
}
to {
transform: rotate(-360deg) translateX(1.125em) rotate(360deg);
}
}
#keyframes move-alt {
from {
transform: rotate(360deg) translateX(1.125em);
}
to {
transform: rotate(-360deg) translateX(1.125em);
}
}
<div class="container">
<div class="box">
</div>
</div>
<div class="container">
<div class="box alt">
</div>
</div>
As you can see both animation are equivalent visually.
Now the effect is as follow: each time we rotate the X-axis and then we translate our element consider the new rotated axis. It's like we rotate the coordinate system then we translate OR its like we do the translation once (since it's the same) then we keep rotating the coordinate system thus we have a rotation at the end.
Now if we consider the opposite transform nothing will happen visually:
.container {
width: 50px;
height: 50px;
margin: 50px;
border: 2px solid;
}
.box {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
animation: move 2s linear infinite;
}
#keyframes move {
from {
transform: translateX(1.125em) rotate(-360deg);
}
to {
transform: translateX(1.125em) rotate(360deg);
}
}
<div class="container">
<div class="box">
</div>
</div>
In this case we translate the coordinate system by the same translation then we rotate our circle. If we change it to a square we will see the effect
.container {
width: 50px;
height: 50px;
margin: 50px;
border: 2px solid;
}
.box {
width: 50px;
height: 50px;
background: red;
animation: move 2s linear infinite;
}
#keyframes move {
from {
transform: translateX(1.125em) rotate(-360deg);
}
to {
transform: translateX(1.125em) rotate(360deg);
}
}
<div class="container">
<div class="box">
</div>
</div>
And here is how your initial animation will look with a square:
.container {
width: 50px;
height: 50px;
margin: 50px;
border: 2px solid;
}
.box {
width: 50px;
height: 50px;
background: red;
animation: move 2s linear infinite;
}
#keyframes move {
from {
transform:rotate(360deg) translateX(1.125em) rotate(-360deg);
}
to {
transform:rotate(-360deg) translateX(1.125em) rotate(360deg);
}
}
<div class="container">
<div class="box">
</div>
</div>
We rotate the coordinate system, we translate our element then we rotate the element so it's like we rotate our the element inside a bigger one that is also rotating in the opposite direction.
If you change the timing function to something else than linear you will have the same rotation but it won't be linear, it will be slower/faster in some interval:
.container {
width: 50px;
height: 50px;
margin: 50px;
border: 2px solid;
}
.box {
width: 50px;
height: 50px;
background: red;
animation: move 2s ease-in-out infinite;
}
#keyframes move {
from {
transform:rotate(360deg) translateX(1.125em) rotate(-360deg);
}
to {
transform:rotate(-360deg) translateX(1.125em) rotate(360deg);
}
}
<div class="container">
<div class="box">
</div>
</div>
This is a simplified explanation, you may check this answer if you want more details about how we deal with multiple function inside transform and how the order is important: Simulating transform-origin using translate
I have a keyframe animation effect on 2 banners on my homepage. I have defined each banner to have a different class so I could choose a different speed for each animation. The HTML looks like this:
HTML
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container">
<img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image">
</span>
</div>
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container-20">
<img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image-20">
</span>
</div>
The CSS Code looks like this:
CSS
/* ------------ Ken Burns 10 Secs ------------- */
.ken-burns-container {
overflow: hidden;
}
.ken-burns-image {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: 10s ease-in 0s 1 scaleout;
-webkit-animation: 10s ease-in 0s 1 scaleout;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(20);
}
}
/* ------------ Ken Burns 20 Secs ------------- */
.ken-burns-container-20 {
overflow: hidden;
}
.ken-burns-image-20 {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: 20s ease-in 0s 1 scaleout;
-webkit-animation: 20s ease-in 0s 1 scaleout;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(1.17);
}
}
Heres a JS Fiddle: https://jsfiddle.net/shan_2000_uk/yhf4dzrx/10/
Both of these bits of CSS work fine on their own. It seems that there is a conflict with the last block of code that defines the scale:
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(20);
}
}
If I remove this block from either of the sections, the other works fine.
I have tried adding the class to this block like so:
.ken-burns-container-20 #-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(1.17);
}
}
But this doesn't seem to work.
Does anyone know, A: Why the code is conflicting and B: A way to use both bits of code without them conflicting?
Thanks a lot for taking the time to look!
You're just overriding the first #keyframe rule with the last one, you'll probably need to name them with different names, let's scaleout1 for the first #keyframe and scaleout2 for the last #keyframe.
Here's a demo:
.ken-burns-container, .ken-burns-container-20 {
overflow: hidden;
}
.ken-burns-image {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: scaleout1 10s ease-in;
animation-fill-mode: forwards;
}
.ken-burns-image-20 {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: scaleout2 20s ease-in;
animation-fill-mode: forwards;
}
/* keyframes */
#keyframes scaleout1 {
0% { transform: scale(1); }
100% { transform: scale(20); }
}
#keyframes scaleout2 {
0% { transform: scale(1); }
100% { transform: scale(1.17); }
}
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container">
<img src="https://via.placeholder.com/300x300" class="ken-burns-image">
</span>
</div>
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container-20">
<img src="https://via.placeholder.com/500x500" class="ken-burns-image-20">
</span>
</div>
Hope I pushed you further.
I have a slideshow where pictures crossfade automatically in a loop. It is set so that 3 pictures are scrolling.
Demo in Codepen (http://codepen.io/lopis/pen/VYRoKE)
<section class="crossfade">
<article class="slide">
<img src="http://lorempixel.com/400/200/people" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/cats" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/sports" alt="" />
</article>
</section>
The CSS:
$slideDuration: 4; // seconds
$slideNum: 3;
#mixin loop($name, $duration, $delay) {
-webkit-animation: $name #{$duration}s #{$delay}s infinite;
-moz-animation: $name #{$duration}s #{$delay}s infinite;
animation: $name #{$duration}s #{$delay}s infinite;
}
#mixin slide() {
#for $i from 1 through $slideNum {
.slide:nth-child( #{$i} ) {
#include loop( crossfade, ($slideNum * $slideDuration), (($i - 1) * $slideDuration) );
}
}
}
#mixin keyframes() {
#-webkit-keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
}
.crossfade {
position: relative;
}
.slide {
position: absolute;
top: 0;
}
.slide:first-child {
position: static;
}
#include slide();
#include keyframes();
Is there a way to make an animation like this that would work with any number of slides using just CSS?
Edit: I understand that such dynamism is not intended in CSS but you can have some dynamic content, like by using calc(), etc.
Some libraries, as the one suggested in the comments, allow the use of mixins for this task. This is not what I'm looking for as it requires a rebuild of the source.
You can get this using only CSS, using a content responsive technique
Let's set a time for each slide of 2 seconds.
We need to set a staggered delay for every nth child of 2 seconds. That is easily acieved with nth-child.
Now, we need to increase the duration of the transition depending on the number of elements. Using this technique we achieve this easily.
The third issue is managing the fade-out. In the standard approach, that would involve changing the keyframes changing point, and it would be cumbersome. The trick to get this working with much less code, is to make a z-index movement in the animation itself. The elements are moving backward, and then we don't care about their opacity anymore
Example set only for 3 posible number of elements:
.container {
width: 100px;
height: 50px;
position: relative;
margin: 10px;
display: inline-block;
}
.element {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: anim 6s infinite;
}
.element:nth-child(1) {
background-color: lightyellow;
animation-delay: 0s;
}
.element:nth-child(2) {
background-color: lightgreen;
animation-delay: 2s;
}
.element:nth-child(3) {
background-color: pink;
animation-delay: 4s;
}
.element:nth-child(4) {
background-color: lightblue;
animation-delay: 6s;
}
.element:nth-child(5) {
background-color: coral;
animation-delay: 8s;
}
.element:nth-child(6) {
background-color: aliceblue;
animation-delay: 10s;
}
.element:nth-child(7) {
background-color: burlywood;
animation-delay: 12s;
}
.element:nth-child(8) {
background-color: bisque;
animation-delay: 14s;
}
.element:nth-child(9) {
background-color: beige;
animation-delay: 16s;
}
.element:nth-last-child(3):first-child,
.element:nth-last-child(3):first-child ~ .element {
animation-duration: 6s;
}
.element:nth-last-child(6):first-child,
.element:nth-last-child(6):first-child ~ .element {
animation-duration: 12s;
}
.element:nth-last-child(9):first-child,
.element:nth-last-child(9):first-child ~ .element {
animation-duration: 18s;
}
#keyframes anim {
0% { opacity: 0; z-index: 100;}
15% { opacity: 1;}
50% { opacity: 1;}
100% { opacity: 0; z-index: 1;}
}
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
<div class="element">SEVEN</div>
<div class="element">EIGHT</div>
<div class="element">NINE</div>
</div>