I want to implement something like this:
img{
transition: 5s linear;
transform: scale(2,2) rotate(-20deg) rotate(40deg) rotate(-40deg) rotate(20deg) scale(0.5, 0.5);
}
But is just scales a bit and then scales back to the original size.
You simply have to create an element and add to it animation using keyframes, as in the example below:
.element {
animation: rotate 5s infinite;
width: 50px;
height: 50px;
background-color: green;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(-20deg);
}
75% {
transform: rotate(20deg);
}
100% {
transform: rotate(-20deg);
}
}
<div class="element"> </div>
You can find more information about it here: https://css-tricks.com/almanac/properties/a/animation/
I recommend you to use animation over transition.
#keyframes{
0%{
//your transform
}
50%{
//your transform
}
100%{
//your transform
}
}
Related
I'm trying to create an animation for a three-letter word. For now, take the word XYZ. The idea is that each letter of XYZ will move in a circular path of different radii and directions (Like one letter moving right, another left, and bottom) before coming back to the original position. I have tried using different forms of code for this but am failing because I don't clearly understand how to animate circular motion with a fixed origin. Will be helpful if anyone could share how to do this. I am also attaching part of my code
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter {
animation: move-letter 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter {
from {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
It depends what you actually want, but you definitely need three different animations (i.e. with different settings), and 3 or more stages per animation, returning to the first position in each case:
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter.X {
animation: move-letter_x 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Y {
animation: move-letter_y 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Z {
animation: move-letter_z 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter_x {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
#keyframes move-letter_y {
0% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
50% {
-webkit-transform: rotate(0deg) translateX(80px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
#keyframes move-letter_z {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>
#box{
animation:moving-box 20s linear infinite, box-rotation 20s linear infinite;
transform-origin: center;
}
#keyframes box-rotation{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
#keyframes moving-box {
0%{
transform: translateX(-40%);
}
50%{
transform: translateX(40%);
}
100%{
transform: translateX(-40%);
}
}
You have to combine the transforms otherwise the transform set in one set of keyframes will overwrite the transforms set in another.
In your example it is possible to combine the two transforms and use them in one set of keyframes:
#box {
animation: moving-box 20s linear infinite;
transform-origin: center;
width: 20vmin;
height: 10vmin;
background-color: red;
}
#keyframes moving-box {
0% {
transform: rotateZ(0deg) translateX(-40%);
}
50% {
transform: rotateZ(180deg) translateX(40%);
}
100% {
transform: rotateZ(360deg) translateX(-40%);
}
}
<div id="box"></div>
Such a solution would have to be carefully worked through for a more complex case - for example different timings or different easing functions.
I want to run two separate keyframe transform animations on the same element but it only seems to run the last animation. Is there a way to do this?
I have tried the example in the code below (codepen), as well, I've tried using position absolute on the element and animating the top and left values. It gives the effect I'm looking for, but it doesn't seem as smooth as using translate.
#keyframes animate-x {
from { transform: translateX(0); } to { transform: translateX(100%); }
}
#keyframes animate-y {
from { transform: translateY(0); } to { transform: translateY(100%); }
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
animate-x 20s linear infinite alternate,
animate-y 15s linear infinite alternate;
}
I'm looking to run both the translateX and translateY animations simultaneously at different speeds.
No, but you can combine multiple transform directives into one property:
#keyframes animate-y {
from {
transform: translateY(0) translateX(0);
}
to {
transform: translateY(100%) translateX(100%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
Also, you can break up the animation by using percentages in your keyframes instead of from and to:
#keyframes animate-y {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100%) translateX(0);
}
50%{
transform: translateY(100%) translateX(100%);
}
75% {
transform: translateY(0%) translateX(100%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
Edit: Move two directions at different speeds:
#keyframes animate-y {
0% {
transform: translateY(0) translateX(0%);
}
25% {
transform: translateY(100%) translateX(50%);
}
50%{
transform: translateY(0%) translateX(100%);
}
75% {
transform: translateY(100%) translateX(50%);
}
}
.element {
width: 200px;
height: 200px;
background-color: blue;
transform-origin: center;
animation:
/*animate-x 2s linear infinite alternate,*/
animate-y 2s linear infinite alternate;
}
<div class="element"></div>
I am taking an online course learning CSS and we are just covering CSS animations. I am trying to practice some of the things I learned (just basic transforms for now) by creating a small animation of a man walking towards the screen down a pathway.
Basically, I want to both translate and scale my image at the same time. I got this working fine, but now I also wanted to add some small rotation so that it looks like the man is slightly moving left and right. Here is my code in a jsfiddle, I don't know how to change the transform-origin so that the man is walking in a straight line on the Y-Axis, the scale makes him walk in a diagonal. I hope that makes sense...
The commented out part of the code includes the scale, as soon as that is added back, and the part without scale is commented out, it acts funny and I'm thinking this has to do with the origin?
https://jsfiddle.net/qLLqdxbm/
HTML:
<div class="man-scale">
<img class="man-walk" src="http://clipart-library.com/img/1184697.png">
</div>
CSS:
.man-walk {
width: 100px;
height: 125px;
position: absolute;
top: 0;
left: 50px;
animation-name: man-walk;
animation-duration: 0.45s;
animation-iteration-count: infinite;
}
#keyframes man-walk {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(1.5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-1.5deg);
}
100% {
transform: rotate(0deg);
}
}
.man-scale {
width: 100px;
height: 125px;
animation-name: man-scale;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* define the animation */
#keyframes man-scale {
/* 0% {
transform: translate(0px, 5px) scale(1.1);
}
25% {
transform: translate(0px, 15px) scale(1.5);
}
50% {
transform: translate(0px, 25px) scale(1.7);
}
75% {
transform: translate(0px, 35px) scale(2.0);
}
100% {
transform: translate(0px, 45px) scale(2.3);
} */
0% {
transform: translate(0px, 5px);
}
25% {
transform: translate(0px, 15px);
}
50% {
transform: translate(0px, 25px);
}
75% {
transform: translate(0px, 35px);
}
100% {
transform: translate(0px, 45px);
}
}
Thanks for the help!
Each time you scale the image along X and Y, the origin shifts in both dimensions by a specific offset. If you can compensate for that offset in the X dimension then a vertical animation could be achieved.
In this case in first keyframe the scale increased by 0.1 which is 100 * 0.1 = 10px now origin got offset by 5px in X dimension, compensating in terms of translateX(-5px). Similarly for all the other keyframes.
If you want a faster animation in the Y dimension just increase the Y translate values without touching the X translation values.
.man-walk {
width: 100px;
height: 125px;
position: absolute;
top: 0;
left: 50px;
animation-name: man-walk;
animation-duration: 0.45s;
animation-iteration-count: infinite;
}
#keyframes man-walk {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(1.5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-1.5deg);
}
100% {
transform: rotate(0deg);
}
}
.man-scale {
width: 100px;
height: 125px;
animation-name: man-scale;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* define the animation */
#keyframes man-scale {
0% {
transform: translate(-5px, 30px) scale(1.1);
}
25% {
transform: translate(-20px, 70px) scale(1.4);
}
50% {
transform: translate(-35px, 120px) scale(1.7);
}
75% {
transform: translate(-50px, 180px) scale(2.0);
}
100% {
transform: translate(-65px, 250px) scale(2.3);
}
}
<div class="man-scale">
<img class="man-walk" src="http://clipart-library.com/img/1184697.png">
</div>
There might be some advanced CSS techniques to calculate the offset automatically.
I'm trying to use CSS animations to animate a cube rotating, and pausing on each face for a set amount of time.
Pen here
#keyframes frontToLeft {
75% { transform: rotateY(0); }
100% { transform: rotateY(90deg); }
}
#keyframes leftToBack {
75% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}
#keyframes backToRight {
75% { transform: rotateY(180deg); }
100% { transform: rotateY(270deg); }
}
#keyframes rightToFront {
75% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.cube-container {
padding-top: 200px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.qube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 2s, 2s, 2s, 2s;
animation-delay: 2s, 4s, 6s, 8s;
* {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
}
<div class="cube-container">
<div class="qube">
<div class="front">front</div>
<div class="left">left</div>
<div class="back">back</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
In Google Chrome and Edge, the animation seems to glitch, but in Firefox it works as intended.
I'd like the outcome to be:
Front Face - Pause 2 seconds, rotate 2 seconds
Left Face - Pause 2 seconds, rotate 2 seconds
Back Face - Pause 2 seconds, rotate 2 seconds
Right Face - Pause 2 seconds, rotate 2 seconds
Can anyone see where this would be going wrong? I have the Codepen preprocessing SCSS with prefixes.
Thanks in advance!
From what I can tell testing this it looks like a bug. Nothing I've tried seems to work to correct the animation. Like you say, Firefox works as expected.
All I can think of as a potential fix is to combine it into one animation something like this:
#keyframes spinCube {
20% { transform: rotateY(0deg); }
25% { transform: rotateY(90deg); }
45% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
70% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
95% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.qube {
animation: spinCube 8s 1 forwards;
}
It would take a bit of tweaking to get the timing right, but it's the only thing I can think of.
Here's a CodePen Example of this alternative solution.