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);
}
}
Related
I wanna make a drop animation when the page loads similar to a working example I've seen at someone else but mine doesn't. The image doesn't drop at all, does not transition from 0 opacity to 1 opacity. It just suddenly appears after the given duration. Help me, please.
.cover img{
height: 60vh;
filter: drop-shadow(1px 5px 3px black);
position: relative;
left: 60px;
animation: drop 1.5s ease;
}
#keyframes drop{
0% {
opacity: 0%;
transform: translateY(-80px);
}
100% {
opacity: 1%;
transform: translateY(0px);
}
}
What I think you've done wrong is used a percentage in the opacity. You just need the number.
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
Does this help?
Animation i've created works fine on Chrome and Firefox, but is pixelated on Safari (version 10.1.1) and IE11.
Tried using translateZ() / translate3d() so the gpu can render the animations but nothing happened.
I've avoided using top, left props. Had an idea of using the will-change prop but it doesn't take animation as a value.
Removing the border radius would fix the rendering issue.
Can someone explain the cause of this and is there a solution to fix this issue?
https://codepen.io/imrdev/pen/awBZOW
html ->
<div class="dot"></div>
css - >
/* KEYFRAME ANIMATION */
#keyframes ease {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(4)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
#keyframes ease2 {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(6)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
.dot {
$scale-duration: 15s;
background-color: black;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
&::before,
&::after {
content: "";
background: red;
width: 7px;
height: 7px;
border-radius: inherit;
opacity:.3;
position: absolute;
transform: translate(0px, 0px);
}
&::before {
animation: ease 5s ease-in-out infinite;
}
&::after {
animation: ease2 5s ease-in-out infinite both $scale-duration/15;
}
}
Thanks :-)
I have not enough reputation so i can't comment yet, so sorry if this doesn't qualify as a proper answer, but have you tried changing the size to something bigger than 7px and use eg scale(1) instead of scale(4)?
if you need to scale the width and height up by 4 or 6, why not just double the original size and scale up by 2 ?
I wouldn't be surprise if safari doesn't really scale the size up, but kinda like "zooms in" and since the original size is just 7 x 7 px it gets pixelated when "zoomed in"
and regarding to the will-change: you wouldn't use "animation" but "transform"
I have a problem and the answer I found are not precise enough.
I have 2 DIV. A div at left:-100%; and a div at left:100%;
I would like in ONE animation, animate those div to smoothly go from their actual Left, to left:0%;
i tried adding just
.animSlide{
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-name: anim;
}
#keyframes anim {
to {
left: 0%;
}
}
But this brake all steps on animation. I mean, after 0.5s my div go from actual left to 0%;
So, is there a way to say
#keyframes anim {
from{
left:current%;
}
to {
left: 0%;
}
}
Thx for help
EDIT : The ABOVE code should work. So my problem come from another part of the code...
This is what i do basically : https://jsfiddle.net/Crocsx/rwyt400n/
Answer based on the JSFiddle provided in comment by the author.
This is not a very good answer because I only have an hypothesis about the problem, however I have a solution.
The problem, I think, is that the value of left after the animation is "virtual". When you start the second animation (by putting the class "slide_to_right") it look at the real value which is still 100%, even though you see it as 0%, and start the animation from this point (that's why it is not animated from 0%).
Because you are using JS to change the state of the elements, instead of using animations, you can use transitions. It will allow your element to be animated automatically when changing between the 2 states and it is easier to set in this case (less code).
Thanks to this property, all you have to do is set the transition property on your sliding element. And then change its state in JS. In this case you want to alternate between left:100% and left:0%. So the transition property is written like this : transition: left 5s;.
To set the different left values, you can directly change the style in JS. Or have a class prepared in your css and add this class to your element. In this case, 2 classes .left and .right work great.
The transition will take care of the animation.
Here is the code : https://jsfiddle.net/rwyt400n/4/ (I changed the id to classes).
I think this is what you're looking for:
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-100px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-100px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
you can specify a css property value that you want the animation to begin with, and end with. you can also split this keyframe into more than just 0% and 100%.
For ex.
#keyframes dropHeader {
0% {
transform: translateY(-100px);
}
25% {
transform: translateY(-75px);
}
50% {
transform: translateY(-50px);
}
75% {
transform: translateY(-25px);
}
100% {
transform: translateY(0);
}
}
See this fiddle.
HTML:
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS:
.wrapper {
height: 200px;
width: 100px;
margin-left: 100px;
}
.div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
left: -100%;
animation: anim 5s;
}
.div2 {
width: 100px;
height: 100px;
background: black;
position: relative;
left: 100%;
animation: anim 5s;
}
#keyframes anim {
to {
left: 0;
}
}
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);
I have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)