I am trying to make a floating effect animation. Basically the element will swing with an axis on its lower part, like in the image bellow:
http://1.bp.blogspot.com/-m7IuLfuaIC0/UGJGAikLXII/AAAAAAAAKis/N8NfMwdMExY/s1600/GANGORRA.jpg
I dont know how to settle the 2 movements, and also make it constant.
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
-webkit-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);
transform: rotateZ(30deg);
Is this what you want?
#ship
{
animation: swing 2s infinite ease;
background: green;
color: #fff;
text-align: center;
transform-origin: bottom center;
height: 100px;
line-height: 100px;
width: 100px;
}
#keyframes swing
{
0%{ transform: rotate(-10deg);}
50%{ transform: rotate(20deg);}
100%{ transform: rotate(-10deg);}
}
<div id="ship">SHIP</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 have the following code for an image of a plane to come in from the left hand side of the page, land... ride on straight for 800px then take off again off the opposite side of the page.
But what is getting to me is the jerkiness between each percentage.
is there a away for it to smooth out the transitions between keyframes.
#keyframes plane-right {
0% {
visibility:visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility:visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility:visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility:visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
Add animation duration and animation timing-function to control the length of the animation and the timing (smoothness).
.plane-right-div {
width: 100px;
height: 70px;
background-color: #bada55;
border-radius: 5px;
animation-name: plane-right;
animation-duration: 6s;
animation-timing-function: ease;
}
#keyframes plane-right {
0% {
visibility: visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility: visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility: visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility: visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
<div class="plane-right-div"></div>
Add following animation-timing property to your image tag, this will help
transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
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);
}
Is it possible to comine css transform with some animation?
I have this tarnsform
transform: translate(-10%, 0px); left: 0px;
which works fine to animate slider left, right scrolling
but I would like to add some fade in animation from opacity 0 to 1
if i understand right, you want both translate and opacity to be included in an animation use this :
div {
width: 100px;
height: 100px;
background: red;
animation-name: fromleft;
animation-delay: 0s;
animation-duration: 0.8s;
animation-fill-mode: backwards;
animation-timing-function: ease-out;
}
#keyframes fromleft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
<div>
</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); } }