I'd like to animate a rectangle to roll from the left of the screen to the right of the screen. Please notice that the transform-origin point should not be in the center of the rectangle, but in the bottom-right corner, so that it doesn't overpass the "hr" line or bounce in any way.
This is what I have achieved untill now, but I'd like it to move continuously untill it gets to the right edge of the screen:
hr {
margin: 0;
}
div {
width: 135px;
height: 135px;
box-shadow: inset 0 0 10px #000000;
transform-origin: right bottom;
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
<div></div>
<hr>
You need to change the transform origin as you go :
hr {
margin: 0;
}
div {
width: 135px;
height: 135px;
box-shadow: inset 0 0 10px #000000;
transform-origin: right bottom;
animation-name: move;
animation-duration: 12s;
animation-timing-function: linear;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: alternate;
margin-top: 20px;
}
#keyframes move {
0% {
transform: rotate(0deg);
transform-origin: right bottom;
}
25% {
transform: rotate(90deg);
transform-origin: right bottom;
}
25.1% {
transform: translate(100%, 100%) rotate(90deg);
transform-origin: top right;
}
50% {
transform: translate(100%, 100%) rotate(180deg);
transform-origin: top right;
}
50.1% {
transform: translate(300%, 100%) rotate(180deg);
transform-origin: left top;
}
75% {
transform: translate(300%, 100%) rotate(270deg);
transform-origin: left top;
}
75.1% {
transform: translate(400%, 0%) rotate(270deg);
transform-origin: left bottom;
}
100% {
transform: translate(400%, 0%) rotate(360deg);
transform-origin: left bottom;
}
}
<div>TEST</div>
<hr>
Interesting, I would consider adding a translation and the trick is to switch fastly between two states to be able to continue the move.
You are rotating your element with 90deg which is equivalent in your case to a translation by the width of the element if we only consider the final state so switching fastly between both situation won't be visible and thus you can rotate your element again and repeat the same trick until your reach the needed position.
hr {
margin: 0;
}
div {
width: 135px;
height: 135px;
box-shadow: inset 0 0 10px #000000;
transform-origin: right bottom;
animation-name: move;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25.01% {
transform: translateX(calc(1 * 135px)) rotate(0deg);
}
50% {
transform: translateX(calc(1 * 135px)) rotate(90deg);
}
50.01% {
transform: translateX(calc(2 * 135px)) rotate(0deg);
}
75% {
transform: translateX(calc(2 * 135px)) rotate(90deg);
}
75.01% {
transform: translateX(calc(3 * 135px)) rotate(0deg);
}
100% {
transform: translateX(calc(3 * 135px)) rotate(90deg);
}
}
<div></div>
<hr>
Related
I want the square to start playing the animation for 5s then, stop playing the animation for 3s and then continue. Is this possible only using CSS3?
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 20s;
animation-play-state: running;
animation-iteration-count:infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="box"></div>
Since animation-duration is 20s, then in the #kayframes, 25% = 5s => 5% = 1s => 15% = 3s (between 25% - 40%)
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation: rotate 20s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
40% {
transform: rotate(90deg);
}
100%{
transform: rotate(360deg);
}
}
<div class="box"></div>
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 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>
I'm working on a splash screen where I'm supposed to animate the transition of a logo from the center to the top left of the screen. with roll out CS3 effect I have done this but I want to move it to the top left
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
#keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
so how I can combine between transition and animation in css to do that ?
Here, you also need to specify right, left and top properties in your animation so as to move the logo from the center to the top-left. Also you need to add translateY to your animation.
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
/* to center */
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
#-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
right: 0;
top: 50%;
}
100% {
opacity: 0;
-webkit-transform: translateX(-100px) translateY(-100%) rotate(720deg);
right: 100%;
top: 0;
}
}
#keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) translateY(0px) rotate(0deg);
right: 0;
top: 50%;
}
100% {
opacity: 0;
transform: translateX(-100px) translateY(-100%)
right: 100%;
top: 0;
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
See here: http://codepen.io/anon/pen/mJEKyv