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>
Related
I can not play several animations one after the other with a "fluid" effect:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
Am I doing something wrong? I want to keep the keyframes separate.
You may need to consider forwards on the second one to keep its last state because actually when both animations ends your element get back to the inital value of the scale transform which is scale(1) (to be more precise it's transform:none)
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
UPDATE
The waiting time is due to the animation-timing-function used which is ease for both and this mean that you will have an ease-out (slow at the end) and ease-in (slow at the start) which create this behavior of pausing between both animations. If you change the first one to ease-in and the last one to ease-out you won't have this issue.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
Your pulse animation ends at scale 1.1, and then your circle snaps back to scale 1. Maybe the pulse keyframes should be as follows:
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
In the snippet below you see no snapping, but maybe this isn't the effect you were looking for?
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
You need a short pulse at the end when your circle is scaled to 1, this is your fluid effect I presume.
Rather than having to different animations, why don't we tweak the keyframes in the zoomIn animation a little bit.
HTML:
<div id="circle"></div>
CSS:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 0.4s ease-out;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Hope this helps.
the only animation is 'Transform', it is best to use a 'timing function' customization, I recommend utilities 'Cubic-bezier' go to this website http://cubic-bezier.com and practice. read before something about bezier curve.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
UPDATE
or this other 'timing-function'
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
height: 100px;
width: 100px;
animation-fill-mode: forwards; /* */
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
Now, as you can see, it return to the original sizes suddenly, without any smoothness.
My keyframes:
#keyframes imageZoom {
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom {
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom {
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
The child div styles:
#myFeaturedItems:hover article {
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#myFeaturedItems article {
background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
background-position: center center;
background-size: cover;
display: block;
height: 100%;
width: 100%;
}
My demo link: http://emanuelezenoni.com/dev/test/
Thanks a lot!
You don't need an animation to achieve what you want. A transition when you hover over the article is suitable. See my very basic example of the transition here below.
What it does:
transition: transform 1s ease-in-out;
This will put a transition on the property transform for 1s with easing ease-in-out. When you hover over .box, the transform: scale(1.25); will run, because we said that a transition was applied on it. The overflow: hidden; makes sure that the content will not be bigger than the box it's in.
You can tweak with the settings to your needs.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.box {
margin-left: 50%;
width: 50%;
min-height: 100%;
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
.box:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="container">
<article class="box">
</article>
</div>
wondering if someone could help me with making this animation slightly better, it rotates of course at -30degrees but its it possible to rotate it like that but the start of the arm to not rotate as well so it looks more like an arm waving?
.santas-arm {
animation: wavingArm 2s ease-in-out infinite;
top: 100px;
left: 100px;
position: relative;
background: black;
width: 200px;
height: 50px;
}
#keyframes wavingArm {
0% {
transform: rotate(0deg) translate(0px);
}
50% {
transform: rotate(-30deg) translate(0px);
}
100% {
transform: rotate(0deg) translate(0px);
}
}
<div class="santas-arm"></div>
It's just a matter of setting the transform-origin:
transform-origin: left center
MDN reference:
The transform-origin property lets you modify the origin for
transformations of an element. For example, the transform-origin of
the rotate() function is the centre of rotation. (This property is
applied by first translating the element by the negated value of the
property, then applying the element's transform, then translating by
the property value.)
.santas-arm {
animation: wavingArm 2s ease-in-out infinite;
top: 100px;
left: 100px;
position: relative;
background: black;
width: 200px;
height: 50px;
transform-origin: left center;
}
#keyframes wavingArm {
0% {
transform: rotate(0deg) translate(0px);
}
50% {
transform: rotate(-30deg) translate(0px);
}
100% {
transform: rotate(0deg) translate(0px);
}
}
<div class="santas-arm"></div>
Use transform-origin (link)
.santas-arm {
animation: wavingArm 2s ease-in-out infinite;
top: 100px;
left: 100px;
position: relative;
background: black;
width: 200px;
height: 50px;
}
#keyframes wavingArm {
0% {
transform: rotate(0deg) translate(0px);
transform-origin: 0% 0%
}
50% {
transform: rotate(-30deg) translate(0px);
transform-origin: 0% 0%
}
100% {
transform: rotate(0deg) translate(0px);
transform-origin: 0% 0%
}
}
<div class="santas-arm"></div>
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}