Codepen
<div></div>
html, body {
margin: 0;
padding: 0;
}
div {
width: 150px;
height: 100px;
background: black;
transform: translate(100px, 50px) rotate(140deg);
animation: circle-top 1.5s ease-in-out forwards;
}
#keyframes circle-top {
10% {
transform: translate(500, -190px) rotate(120deg);
}
30% {
transform: translate(300, -150px) rotate(100deg);
}
70% {
transform: translate(100, -50px) rotate(360deg);
}
90% {
transform: translate(50, -30px) rotate(30deg);
}
100% {
transform: translate(0, 0) rotate(0);
}
}
I specified some random rotation in the keyframes. Obviously the animation is not following the rules because it seems to be so smooth and not how I specified.
#keyframes circle-top {
10% {
transform: translate(500, -190px) rotate(120deg);
/* !!! */
}
Your invalid value for the first translate parameter is causing most of your keyframes to become invalid as well.
Every length in CSS always needs a unit, unless the value happens to be 0.
Related
I am trying to make an Oscillatory animation using css as shown below:
Here's how I have created my animation:
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-180deg);
}
50% {
transform: rotate(-90deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
Here is my class: (Using sccs)
.logo {
height: 5rem;
transition: all 0.3s ease;
&box {
position: absolute;
top: 4rem;
left: 4rem;
}
&:hover {
animation-name: rotateFeather;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
Here I am facing this problem: When it reaches 180deg at 100% it abruptly resets to 0 which I want to make smooth.
How is it possible to do the same?
To ensure smooth transition, We need to make sure that transformation at 0 and 100% must match with the original state:
#keyframes rotateFeather {
0% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
20% {
transform: rotate(-30deg); //-60
transform-origin: bottom;
}
40% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
60% {
transform: rotate(30deg); // 0
transform-origin: bottom;
}
80% {
transform: rotate(60deg); //30
transform-origin: bottom;
}
100% {
transform: rotate(0deg); //30
transform-origin: bottom;
}
}
This helped me to solve my issue. I am not sure, if I need to add transform-origin in every stage, if someone can elaborate better on that, that would be helpful.
Here's a simplified version of your latest animation code (with a Codepen to see it in action):
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-30deg);
}
80% {
transform: rotate(60deg);
}
100% {
transform: rotate(0deg);
}
}
.logo {
transform-origin: bottom;
&:hover {
animation: rotateFeather 1s linear infinite;
}
}
Some points about the above tweaks:
You don't need transform-origin at every keyframe. You can set it globally.
You can roll all of your animation properties into a single shorthand rule.
You can skip keyframes that are mathematically interpolating where the animation would be going anyway (notice I omitted 40% and 60% above and it looks the same).
You don't need any transition rules on elements that you are animating with keyframes. Unless you're using it for something else, but you want to be careful to avoid attempting to animate the same property on the same element with both animation and transition simultaneously, as it will break the animation in question.
I am trying to animate a line that expands both ways from the centre using transform:scale but for some reason the line kind of "rewinds" slightly when it reaches the end, but only on the right side of the line. This only seems to happen on firefox, (both on mobile and desktop) but seems fine on chrome.
<div class="line"></div>
<style>
.line {
height: 4px;
width: 5px;
background-color: #5d496a;
margin: 0 50%;
animation: line_animation 1s forwards ;
}
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
</style>
I am still learning animations so I am not sure what I am doing wrong. Any help would be very appreciated.
https://www.w3schools.com/code/tryit.asp?filename=GRA6EYT2GLSX
Looks like it was an issue with scale being greater than 1.
Fixed by changing width: 5px; to width: 15%; and changed
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
to
#keyframes line_animation {
from {
transform: scale(0.01,1);
}
to{
transform: scale(1,1);
}
}
I have a simple CSS marquee scrolling up across a screen, essentially using the code found here (JSFiddle):
https://jsfiddle.net/c8r5kc1L/1/
<style style="text/css">
.marquee-outer {
height: 100px;
overflow: hidden;
position: relative;
color: orange;
}
.marquee-inner {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
</style>
<div class="marquee-outer">
<div class="marquee-inner">Text</div>
</div>
I am trying to enter several paragraphs worth of content into the actual scroll area, which means that the animation resets before I've gotten through all the content. If I increase the animation duration (say, to 100s), the animation slows down, and ends up going through the same (partial) amount to the information.
Is there a way to keep the speed of the scroll constant, but actually just increase the duration of the scroll prior to reset?
I found a solution, if you "sync" the -100% with the amount of paragraphs that you want (And uses <p> inside <div class="marquee-inner"> because it gives you more control in the scrolling animation):
100% {
transform: translateY(-100%);
}
So is you want to have 4 paragraphs do something like this:
100% {
transform: translateY(-400%);
}
And also don't use line-height: 50px; in .marquee-inner instead use margin-bottom:
.marquee-inner p{
margin-bottom: 30px;
}
Look the example: https://jsfiddle.net/u2j2679u/
I have this CSS animation which I'm trying to reverse the animation of based on a class being added to a DOM node. I've tried multiple things but with no avail. Here is the code I'm using, see below:
EXAMPLE
// Closed state
#-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
#-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } }
#keyframes spin-close { 100% { transform:rotate(-0deg); } }
// Open state
#-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
#-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
#keyframes spin-open { 100% { transform:rotate(-90deg); } }
I don't know whether I'm looking at it all wrong? Please advise(a demo would be awesome).
Don't bother with javascript or animations. Use a CSS transition for this:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
transition:all 1s ease-out;
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.image:hover {
transform:rotate(90deg);
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
http://jsfiddle.net/Ugc5g/892/
To reverse the rotation, you can simply change the degree value to the opposite value. For example, if the element is currently rotated 45 degrees clockwise, you can reverse the rotation by rotating it -45 degrees.
transform: rotate(-45deg);
Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery
I use keyframes to do that
#-webkit-keyframes rotate {
enter code here
0% {
-webkit-transform: rotate(0deg);
}100% {
-webkit-transform: rotate(90deg);
}
}
#-webkit-keyframes rotate2 {
0% {
-webkit-transform: rotate(90deg);
-webkit-transform: rotateX(45deg);
}100% {
-webkit-transform: rotate(180deg);
-webkit-transform: rotateX(45deg);
}
}
#-webkit-keyframes rotate3 {
0% {
-webkit-transform: rotate(180deg);
}100% {
-webkit-transform: rotate(270deg);
}
}
#-webkit-keyframes rotate4 {
0% {
-webkit-transform: rotate(270deg);
}100% {
-webkit-transform: rotate(360deg);
}
}
My question is I have also applied webkit perspective to give a 3d kind of view and I have to rotate the div keeping the perspective X angle to 45deg...how is it possible ?
body {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 500;
-webkit-perspective-origin: 45%;
}
#mydiv {
height: 300px;
width: 100px;
border: 2px solid #D3DAED;
position:absolute;
top:29%;
left:45%;
**-webkit-transform: rotateX(45deg);**
}
I don't really understand exactly what you are trying to do, but in jquery you can alter css dynamically like this:
$('#mydiv').css('-webkit-transform', 'rotateX(45deg)');