Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
If I apply animation to element having css style with transform: translate
for example
transform: translateY(100px);
at the end of animation the element jumps to desired position. How to avoid this jump and get smooth animation to desired position?
http://jsfiddle.net/alexchetv/bc49LnLt/
Just remove the last keyframe:
to {
transform: none;
}
div {
width:20px;
height:20px;
background-color:#f00;
animation:bounceInDown 1s;
transform: translateY(100px);
}
#keyframes bounceInDown {
from, 60%, 75%, 90% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
}
<div></div>
If you have this problem on Opera and Chrome, It's a sneaky bug in Webkit. However, hope these two lines would help.
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've been toying around with animate.css and it has completely messed up my website. I'm not sure of the cause at all. Also I would like the animation to only happen when the div is in the view-port and I'm not sure how to do so.
https://road-aware.herokuapp.com/
You have to just override default animate.css behaviour. Because you already use transform in your css and animate.css overrides your css. ;)
See this jsfiddle sample
It's without browser prefixes, but that should be not big deal. ;)
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-50%, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(-50%, -40%, 0);
}
75% {
transform: translate3d(-50%, -60%, 0);
}
90% {
transform: translate3d(-50%, -45%, 0);
}
to {
transform: translate3d(-50%, -50%, 0);
}
}
Change your .landing-container to:
.landing-container {
text-align: center;
position: relative;
top: 50%;
padding: 15px 0;
box-sizing: border-box;
width: 80%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: auto;
display: block;
}
Changing the position makes sure the element centers vertically. Removing left: 50% and adding margin: auto centers it horizontally. Adding the display: block makes the two above possible.
you can use overflow: hidden
<style type="text/css">
.examplediv {
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid {
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
overflow:scroll;
}
</style>
<body>
<div id="divid" class="examplediv">
...
</div>
widthout
.examplediv
{
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid
{
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
}
<body>
<div id="divid" class="examplediv">
</div>
http://www.css4you.de/overflow.html
I've always been inspired by the HUD display in Iron Man. Specifically how the icons fly in at the initial loading of the suit like here:
https://www.youtube.com/watch?feature=player_embedded&v=ZwOxM0-byvc
However, I haven't found a way in CSS get the images to start at the center of the page, drop to the bottom and then slide into their respective spots. I figured that I would have to use something like this:
from {
opacity: .5;
position: absolute;
left: 50%;
transform: translate3d(0, -100px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
position: absolute;
left: 50%;
transform: translate3d(0, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
to{
left: 0%
}
However, when I do that it creates a weird jitter as it doesn't appear to know how to make the transition smoothly from left center (50% absolute) to then it's respective placement on the page.
Ideas?
When applying a CSS scale transform to an element, is it possible to set the 'from' value as the current scale?
For example, consider the following 2 CSS keyframes used to apply separate growing and shrinking animation transforms:
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
#-webkit-keyframes shrink
{
from { -webkit-transform: scale(1,1); }
to { -webkit-transform: scale(0,0); }
}
This will successfully scale the element it's applied to, but always from 0 to 1 (or vice-versa). If the shrink keyframe gets applied before the grow keyframe has finished, it has the effect of 'jumping' the scale to 0 before the transform begins.
You can see this effect in this jsFiddle showing CSS scale transform on mouseover
Notice that if you mouse over the black square and then quickly mouse out, the scale transform is not smooth.
What I'm essentially after is something like the following:
#-webkit-keyframes grow
{
from { -webkit-transform: CURRENT_SCALE; }
to { -webkit-transform: scale(1,1); }
}
Your animation makes the element go from 0% scale to 100% scale on hover, and from 100% to 0% scale on mouseOut.
I think in this case, the solution could be setting the basic scale of the element according to its start point :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: inline-block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
In this case, I would harldy recommend using pure CSS solution, using transition on :hover : http://jsfiddle.net/bg6aj/21/
You wont have any "jumping" effect :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all .2s;
-webkit-transition: all .2s;
}
#touchPad:hover + #output {
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
At this point, you'll have no more jumping effect.
Then : can we do something like :
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
Answer : quite easy :
#-webkit-keyframes grow
{
0% { -webkit-transform: scale(1,1); }
50% { -webkit-transform: scale(0,0); }
100% { -webkit-transform: scale(1,1); }
}
Which means: take my element (as scale default is 100%), render it with 0% scale at 50% of the animation, and turn it back at 100%. Trying to set something like current_scale doesn't make sense.
Considering that, I'll definitely choose the Transition solution.
It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation.
Chrome and Safari does not, which looks a lot better when animating subtle movements.
The animation is done the following way:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
}
Here's an example of what I mean:
http://jsfiddle.net/yZgTM/.
Just open it in Chrome and IE 10 (or Firefox) and you should notice the difference in smoothness of the motion.
I realise there might be many factors affecting this behaviour such as if the element is drawn with hardware acceleration or not.
Does anyone know of a fix to try to force browsers to always draw the elements on subpixels?
I found this similar question, but the answer was to animate using a translate transform, which is exactly what I'm doing:
CSS3 Transitions 'snap to pixel'.
Update:
After playing around a bit I found a fix for Firefox, doesn't do anything in IE 10 though. The trick is to scale down the element ever so slightly and use translate3d with a 1px offset in the Z-axis:
#keyframes bobbingAnim {
0% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
50% {
transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
animation-timing-function:ease-in-out
}
100% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
}
I love your question!
Good job in noticing the pixel-snap in firefox and IE10.
I've researched this subject a while ago and I advise you to check the GSAP forums, as they contain a lot of useful information on web animations.
Here's a topic regarding IE10 pixel-snap issue.
What you need to do is add a minimal rotation to the element. This is so IE and Firefox will redraw it in a different way - which will stop pixel-snap for good :)
Tyr this:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
}
#Nemanja is correct you will find that if you tweak the speed you will see better results this is fairly typical with css animations. Also it doesn't really make a difference in this case if you enable hardware acceleration. I tidied up the code a little bit and ran it without any issues, i do not have ie10; However, I have 11. You may have to just remove the second transform of translateZ if it doesn't run in 10
body {
background-color: #ccc;
}
.bobbing {
position: absolute;
animation: bobbingAnim ease-in-out .5s infinite;
-moz-animation: bobbingAnim ease-in-out .5s infinite;
-webkit-animation: bobbingAnim ease-in-out .5s infinite;
}
.bobbing.text {
font-size: 50px;
color: #000;
left: 30px;
top: 30px;
}
.bobbing.image {
left: 30px;
top: 150px;
background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
width: 310px;
height: 110px;
}
#keyframes bobbingAnim {
50% {
transform: translate(0, 12px) translateZ(0);
}
}
#-webkit-keyframes bobbingAnim {
50% {
-webkit-transform: translate3d(0, 12px, 0);
}
}
#-moz-keyframes bobbingAnim {
50% {
-moz-transform: translate3d(0, 12px, 0);
}
}
There cant be half a pixel movement, there is no such thing.
Your problem is the speed and smoothness of the animation, not the "pixel snapping".
When I click a button, I wanna do some things listed below using HTML5 and CSS3. But I don't know how can I achieve these things at the same time.
When I click a button:
Change element A's CSS3 property -webkit-transform to rotateY(180deg) in 1 second (using -webkit-transition:-webkit-transform 1s;)
Change element A's CSS3 property -webkit-transform to scale(0.8) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;). Then change element A's CSS3 property -webkit-transform back to scale(1) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;).
Are there any solutions about this issue?
Thank you!
You'd have to use animation rather than transitions:
#-webkit-keyframes myAnimation{
from {
-webkit-transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(90deg) scale(0.8);
}
to {
-webkit-transform: rotate(180deg) scale(1);
}
}
div {
-webkit-animation-duration: 1s;
}
div:hover {
-webkit-animation-name: myAnimation;
-webkit-transform: rotate(180deg) scale(1);
}
Here's a demo.