I'm scratching my head on this animation I need to create. I've been briefed on moving a single element like the text in this "missing" video
However, I cant seem to get close to the animation using keyframes and translate x/y like this:
25% { transform: translate(10px, 10px); }
How is best to recreate this movement?
#keyframes moveit {
0% { transform: translate(0px, 0px); }
25% { transform: translate(10px, 10px); }
50% { transform: translate(20px, 10px); }
75% { transform: translate(10px, 20px); }
100% { transform: translate(0px, 0px); }
}
It starts without transformation, its original position. Then it moves around and then it comes back. Repeat. You can put more steps to make it move more "randomly" or smoothly.
.moveit{ animation: moveit 1s linear infinite; }
Play around with the duration (1s) and timing function (linear, ease-in-out, ...) to get what you want.
Keyframes are a good way to do animation. You can slow it down by making the animation time longer or play around with giving different delays to each letter.
But I'd probably go with something like this.
body {
background: #3C3C3C;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
.missing_animation .letter {
display: inline-block;
-webkit-animation-name: shakey;
-webkit-animation-duration: 3s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
font-size: 120px;
color: #3C3C3C;
text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
.missing_animation .letter_break {
display: inline-block;
transform: translateY(50%);
}
.missing_animation .letter:nth-child(even) {
-webkit-animation-delay: 0.5s;
}
#keyframes shakey {
0% {
transform: translate(1px, .5px) rotate(0deg);
}
10% {
transform: translate(-.5px, -1px) rotate(-.5deg);
}
20% {
transform: translate(-1.5px, 0px) rotate(.5deg);
}
30% {
transform: translate(0px, 1px) rotate(0deg);
}
40% {
transform: translate(.5px, -.5px) rotate(.5deg);
}
50% {
transform: translate(-.5px, 1px) rotate(-.5deg);
}
60% {
transform: translate(-1.5px, .5px) rotate(0deg);
}
70% {
transform: translate(1px, .5px) rotate(-.5deg);
}
80% {
transform: translate(-.5px, -.5px) rotate(.5deg);
}
90% {
transform: translate(1px, 1px) rotate(0deg);
}
100% {
transform: translate(.5px, -1px) rotate(-.5deg);
}
}
<div class="missing_animation">
<div class="letter">M</div>
<div class="letter">I</div>
<div class="letter">S</div>
<div class="letter">S</div>
<div class="letter_break">
<div class="letter">I</div>
<div class="letter">N</div>
<div class="letter">G</div>
</div>
</div>
Related
I currently have an image "floating". So it moves up and down over 10 seconds. But what I'd really like it to do is to do is slide in right from off canvas over 10 seconds and then float infinitely.
The code I have now just makes it float up and down and I'm struggling to add the slide in part. I'm new to CSS animation so I'd appreciate any help.
This is what I have so far.
.shake-vertical {
-webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
#-webkit-keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
#keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
Considering your image has a class of ball. You can add this CSS to your Existing CSS:
#keyframes slide-in {
from{
margin-right: -100px;
}
to{
margin-right: 0;
}
}
.ball{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
float: right;
animation: slide-in 10s forwards,/*forwards keeps the ball at final position*/
shake-vertical 15s infinite 10s both;
/*
* Two animations applied
* comma separated
* shake-vertical has a 10 second delay specified by '10s'
* the delay should be same as the duration of first animation
*/
}
I have added comments for explanation but if you need more, feel free to comment.
You can set the object with a slidein animation for 10 seconds and on the animationend event change its class to your shake animation.
Add CSS something like this:
#keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
.slidein {
animation-name:slidein;
animation-duration:10s;
animation-fill-mode: follow;
}
.shake {
animation-name: shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
}
and JavaScript something like this
obj.addEventListener("animationend", function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
Example with a simple sliding square in the Snippet.
<!DOCTYPE html>
<html>
<head>
<style>
#keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
#keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
#obj {
position: relative;
width: 50px;
height: 50px;
top: 50px;
background-color:magenta;
animation-delay:0s;
}
.slidein {
animation-name:slidein;
animation-duration:10s;
}
.shake {
left: 50vw;
animation-name:shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
</head>
<div id="obj" class="slidein"></div>
<script>
var obj = document.getElementById('obj');
obj.addEventListener("animationend", function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
</script>
</html>
I'm trying to make a very simple animation move with CSS only.
What i'm trying to make is
Object moves back and forth between 200px and 800px, and as the object reaches the edges, it will rotate its direction.
.cow {
width: 300px;
position: absolute;
top: 50px;
left: 0px;
animation: cowmove 5s linear both infinite alternate,
rotate 0.3s linear 5s;
}
#keyframes cowmove{
from{transform: translateX(200px);}
to{transform: translateX(800px);}
}
#keyframes rotate{
from{transform: rotateY(0);}
to{transform: rotateY(180deg);}
}
This is what i've coded so far, but the rotate is hard for me.
with current code, the object will move from 200px to 800px, teleports to 200px point and rotate, teleports back to 800px point and move back to 200px.
It may be very simple solution, but i'm having a headache figuring this out :(
Thanks,
Instead of creating two #keyframes, you can do both transform in one like this:
<div class="translate"></div>
<style>
.translate{
height: 100px;
width: 100px;
background: #151f28;
transition: 0.5s;
animation: cowmove 4s infinite;
}
#keyframes cowmove{
0% {
transform: translateX(100px) rotateY(0deg);
}
49% {
transform: translateX(500px) rotateY(0deg);
}
50% {
transform: translateX(500px) rotateY(360deg);
}
100% {
transform: translateX(100px) rotateY(360deg);
}
}
</style>
Make it only one animation since you deal with the same property:
.cow {
width: 80px;
height: 80px;
background: linear-gradient(blue 50%, red 0);
border-radius: 50%;
position: absolute;
top: 50px;
left: 0px;
animation: cowmove 5s linear infinite;
}
#keyframes cowmove {
0% {
transform: translateX(100px) rotate(0);
}
30% {
transform: translateX(400px) rotate(0);
}
50% {
transform: translateX(400px) rotate(180deg);
}
80% {
transform: translateX(100px) rotate(180deg);
}
100% {
transform: translateX(100px) rotate(360deg);
}
}
<div class="cow"></div>
I'm looking for solution to my problem. I want to zoom in and out without stoping every second in a div with backgroung-image.
Something like this fruit in the game:
https://www.google.co.il/search?source=hp&ei=ghU7XfaEBai4gwfA6rrIDA&q=snake&oq=snaj&gs_l=psy-ab.1.0.35i305i39j0i10l9.776.1740..2868...0.0..0.192.754.0j5......0....1..gws-wiz.....0..35i39j0i131j0j0i67.KPZVLy3h8CU
I find the solution below but I use react so I need css/js solution and not jQuery one.
Zoom an image every one second jQuery
The solution is to use CSS "breathing" animation. An example how it works:
#breathing-button {
width: 270px;
padding: 20px;
margin: 50px auto;
border: 1px solid #d1d1d1;
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 3px;
text-align: center;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
<div id="breathing-button">Breathing Button</div>
I want an element to be animated like a swaying plant. I am looking to animate a div in the following manner.
Fix the bottom
Move the head back and forth
Looking for full css solution.
I have tried this,
#keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-1deg);
}
50% {
transform: rotate(2deg);
}
75% {
transform: rotate(-0.4deg);
}
100% {
transform: rotate(1deg);
}
}
You can set transform-origin property to bottom.
.el {
margin: 30px 50px;
width: 0;
height: 0;
border-style: solid;
border-width: 150px 50px 0 50px;
border-color: #007bff transparent transparent transparent;
animation: wiggle infinite 3s alternate;
transform-origin: bottom;
}
#keyframes wiggle {
0% {transform: rotate(0deg);}
25% {transform: rotate(-3deg);}
50% {transform: rotate(5deg);}
75% {transform: rotate(-1deg);}
100% {transform: rotate(2deg);}
}
<div class="el"></div>
Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}