I have an image that I want to "walk across" a div then at the end flip around horizontally and head back the other way. I have created a codepen here: https://codepen.io/jessiemele/pen/rGQWWE. The tinyWalk animation gets very bouncy towards the end, right before it turns and heads back to the start, I'm assuming it is form the image hitting the top of the div. I'm wondering if there is a way to combine these 2 animations to just run them on the image so I don't have to run tinyWalk on the div. My code is here:
<div class="catapillarBox">
<img src="https://i.imgur.com/0XPhWfE.jpg" class="caterpillar"
alt="caterpillar drawing" />
</div>
</div>
<div class="blueBox">
<h5>I'm your box</h5>
</div>
CSS:
.blueBox {
background-color: #1d88eb;
width: 875px;
height: 400px;
margin-top: 125px;
padding-bottom: 70px;
margin-top: 150px;
z-index: 2;
}
img.caterpillar {
position: absolute;
top: 125px;
left:0;
-webkit-animation: walk 20s forwards infinite linear;
animation: walk 20s forwards infinite linear;
z-index: 3;
}
#keyframes walk{
0% { left: 0; transform: rotateY(0deg);}
49% {transform: rotateY(0deg);}
50% {left: 700px; transform: rotateY(180deg);}
99% {transform: rotateY(180deg);}
100% {left: 0; transform: rotateY(0deg);
}
.catapillarBox {
width: 200px;
height: 100px;
-webkit-animation: tinywalk 500ms linear alternate infinite;
animation: tinywalk 500ms linear alternate infinite;
}
#keyframes tinywalk {
0%{ transform: rotate(0);}
25%{ transform: rotate(-1deg);}
50%{ transform: rotate(1deg);}
75%{ transform: rotate(-1deg);}
100%{ transform: rotate(0);}
}
Jessica, I created a codepen here that should solve your problem. It looks like your rotation of your image is just too drastic for your liking. I edited it to a 0.2 degree rotation. Try the following CSS:
.blueBox {
background-color: #1d88eb;
width: 875px;
height: 400px;
margin-top: 125px;
padding-bottom: 70px;
margin-top: 150px;
z-index: 2;
}
.catapillarBox {
width: 200px;
height: 100px;
-webkit-animation: tinywalk 500ms linear alternate infinite;
animation: tinywalk 500ms linear alternate infinite;
}
#keyframes tinywalk {
0%{ transform: rotate(0);}
25%{ transform: rotate(-0.2deg);}
50%{ transform: rotate(0.2deg);}
75%{ transform: rotate(-0.2deg);}
100%{ transform: rotate(0);}
}
img.caterpillar {
position: absolute;
top: 125px;
left:0;
-webkit-animation: walk 20s forwards infinite linear;
animation: walk 20s forwards infinite linear;
z-index: 3;
}
#keyframes walk{
0% { left: 0; transform: rotateY(0deg);}
49% {transform: rotateY(0deg);}
50% {left: 700px; transform: rotateY(180deg);}
99% {transform: rotateY(180deg);}
100% {left: 0; transform: rotateY(0deg);
}
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 want to animate dots infinitely, like: first up, second down, third up, fourth-down AND THEN first up, second down and etc.. If I add an infinite property to animation it's like everything animates despite the delay.
[Codepen](https://codepen.io/jagus00/pen/dyyJjaK)
You have to put the "pause" period in the animation itself setting its iteration to infinite. To change the speed, you can work with the duration of the animation and/or percentuals.
#keyframes goUp {
0% {
transform: translateY(0);
}
12.5% {
transform: translateY(50px);
}
25% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
#keyframes goDown {
0% {
transform: translateY(0);
}
12.5% {
transform: translateY(-50px);
}
25% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
* {
box-sizing: border-box;
}
body {
background: #f9f9f9;
}
.dots {
display: flex;
justify-content: center;
margin-top: calc(50vh - 50px);
}
.dots i:nth-child(1) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #ff9600;
animation: goUp 1.6s ease-in-out infinite;
}
.dots i:nth-child(2) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #383838;
animation: goDown 1.6s 0.4s ease-in-out infinite;
}
.dots i:nth-child(3) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #ff9600;
animation: goUp 1.6s 0.8s ease-in-out infinite;
}
.dots i:nth-child(4) {
height: 50px;
width: 50px;
border-radius: 50%;
margin: auto 15px;
background: #383838;
animation: goDown 1.6s 1.2s ease-in-out infinite;
}
<div class="dots">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
Using SASS syntax:
#mixin dot
height: 50px
width: 50px
border-radius: 50%
margin: auto 15px
#keyframes goUp
0%
transform: translateY(0)
12.5%
transform: translateY(50px)
25%
transform: translateY(0)
100%
transform: translateY(0)
#keyframes goDown
0%
transform: translateY(0)
12.5%
transform: translateY(-50px)
25%
transform: translateY(0)
100%
transform: translateY(0)
*
box-sizing: border-box
body
background: #f9f9f9
.dots
display: flex
justify-content: center
margin-top: calc(50vh - 50px)
i:nth-child(1)
#include dot
background: #ff9600
animation: goUp 1.6s ease-in-out infinite
i:nth-child(2)
#include dot
background: #383838
animation: goDown 1.6s .4s ease-in-out infinite
i:nth-child(3)
#include dot
background: #ff9600
animation: goUp 1.6s .8s ease-in-out infinite
i:nth-child(4)
#include dot
background: #383838
animation: goDown 1.6s 1.2s ease-in-out infinite
I want to spin the below image to 360 degree and below css applied on that image:
<img src="" alt="" />
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
It's working on desktop well but not on mobile? If I have done anything wrong?
This works for me both on mobile and desktop.
.loader {
position: absolute;
width: 120px;
height: 120px;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Your spin code might be not working because you haven't coded that correctly. There are some issues in the #keyframes animation.
SEE THE EXAMPLE
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); } }