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>
Related
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 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>
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;
}
I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down.
Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel.
View the JSFiddle in Chrome and FireFox to view the difference: http://jsfiddle.net/gonygdfz/6/
Is there any way to make FireFox render this smoothly rather than having it jumping pixel by pixel? It's extremely noticeable in the actual application for this.
The Markup:
<div id="parent">
<div id="move-x">
<div id="move-y">
<div id="child"></div>
</div>
</div>
</div>
The CSS:
#parent {
width: 400px;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
animation: range-y 10s infinite ease;
}
#move-x {
animation: range-x 10s infinite ease;
-webkit-animation: range-x 10s infinite ease;
}
#move-y {
animation: range-y 15s infinite ease;
-webkit-animation: range-y 15s infinite ease;
}
#keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
#-webkit-keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
It appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
ALL IS NOT LOST
I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.
CLICK FOR COMPARISON
Techniques used for this effect:
Linear transitions instead of ease.
Box-shadow on animated object. (Softened edge helps create fake AA effect).
Rotate object. Adding the smallest rotate helps to better utilised the rendering engine.
CSS
#parent {
width: 50%;
float:left;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
box-shadow:0 0 1px rgba(0,0,0,0.7);
animation: range-y 10s infinite linear;
-webkit-animation: range-y 10s infinite linear;
}
#move-x {
animation: range-x 10s infinite linear;
-webkit-animation: range-x 10s infinite linear;
}
#move-y {
animation: range-y 15s infinite linear;
-webkit-animation: range-y 15s infinite linear;
}
#keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
#-webkit-keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#-webkit-keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
FINAL WORD
You can still tweak the effects a little either way to fit your requirements.
It's not perfect but I hope it helps soften the end effect for your actual animation.
Use a small amount of rotation with the transformation. This forces Firefox to avoid the optimization and resample the image on every frame.
#keyframes optimized {
0%{
transform: translateX(0%);
}
100%{
transform: translateX(200px);
}
}
#keyframes subpixel {
0%{
transform: translateX(0%) rotate(0.1deg);
}
100%{
transform: translateX(200px) rotate(0.1deg);
}
}
div{
width:5px;
height:50px;
background-color: red;
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:linear;
}
.optimized{
animation-name: optimized;
margin-bottom:1px;
}
.subpixel{
animation-name: subpixel;
}
<div class="optimized">
</div>
<div class="subpixel">
</div>
is it possible to spin a background-image in css?
i can spin an element using:
#-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
#-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
but what about if i want to spin an element's background-image?
can't find nothing, i can use gif but i would like to make it in css if possible !
any idea?
thanks
i forgot to say if is possible to make the animation cross-browsers supported :P
You can do that setting the background on a pseudo element, for instance an after
.main {
width: 200px;
height: 300px;
position: relative;
border: solid 1px gray;
}
.main:after {
width: 100%;
height: 100%;
position: absolute;
background: url("http://placekitten.com/800/1200");
background-size: cover;
content: '';
-webkit-animation: spinX 3s infinite;
animation: spinX 3s infinite;
}
#-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
#keyframes spinX
{
0% {transform: rotateX(0deg); transform-origin: 0% 50% 0;}
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;}
}
<div class="main"></div>
demo
You could put the background on a pseudo element, like ::before and animate that.
Example, and another one :)
If you have content above the image, add z-index: -1 to the pseudo element.