I've encountered a small glitch in the CSS animation scale(). I've set up the CSS to scale an image 1.1 times when I hover the image. This happens correctly, but an annoying line goes over the image as well. This is due to the scale() transform, because if I leave this out, the lines do not show. Can this be because I make the image bigger than its actual size or ... ?
It's even showing in this fiddle I created: http://jsfiddle.net/gpafke6y/
transform: scale(1.1)
Image showing what I mean:
Use transition 0.5s that will be more smooth. See here or here for Details
Related
I have to make an animation with css. A logo flying and enlarging into the front based on a curved path or parabola. I made a small sketch.
The logo is staring small top right, flying and getting larger and is ending left center.
Sketch
I found a lot of informations about cubic-bezier also cubic-bezier editors, but unfortnatelly I am not able to realize this.
The html
<div class="animation"><img src="logo.jpg"></div>
The css
.animation {
transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465);
transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465);
}
This was one (of several) trys but the logo isn't animated. Besides, if I understand it, that is only the path without scaling.
Where is my thinking error?
Thanks a lot & regards!
First, cubic-bezier is a timing function, not a "path" function. It's not going to accomplish what you are after.
Second, to accomplish what you desire, use the CSS3 matrix transition property in conjunction with a custom animation function with a custom step callback. Either that, or adjust CSS properties like top, left, height, and width directly with said animation function.
Good luck!
I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) rotateX(360deg); and animate to transform: none, which works well. But as soon as i (in any step) declare a height/width in the keyframes, the rotation stops working. It will still scale as it should, and the height/width properties are applied, but the rotation is skipped entirely.
Here is a Codepen to demonstrate the issue:
http://codepen.io/anon/pen/abDCK
As you see, there's no rotation going on in there, it just simply scales in. Now, scroll down in the CSS and comment out the height/width properties, and you'll see that the rotation now suddenly works.
I've tried different combinations of having/not having height/width declared in the normal selector (not in the keyframe), i've also tried putting the height/width declarations in different steps in the keyframes. No success.
I get the same result in both Firefox in Chrome. Is this the intended behaviour? If so, why? Are there any workarounds?
Something to do with the transforms in the keyframes not being balanced?. You need to add translateX(0deg) to either the 40% keyframe, of 100% keyframe, depending on where you want it.
http://codepen.io/anon/pen/lJKkD
I'd sure love it if somebody could explain the reason - but this is the "solution"
I am trying to execute two animations at once upon hover of a single div.
One animation is to scale an image to 50%. The other animation is to scale text from 0-100%, and move it up 10px from its original position.
I have successfully created the animation of the scaling image using the code below, but I am running into problems with coding the text animation.
-webkit-transform: scale(.5);
Here is the working scaling image animation on a JSFiddle:
http://jsfiddle.net/ZVScz/
How can I now implement the animation of the text scaling from 0-100% and moving up 10px?
Thank in advance to anyone who is able to help out!
You need to use the adjacent selectors CSS selector, elem1 + elem2 where elem2 is immediately after elem1 and they have the same parent.
I have implemented something to the effect at http://jsfiddle.net/ZVScz/1/ and you can now adjust the transforms to your liking.
If you have any questions feel free to ask.
Fred
Try using : #worksContainer:hover #worksText { ... }
Repleace ... with the animation you want for the text.
I have a loading indicator (a bar that continuously animates its width from 0% to 100%) using css3 keyframes. I trigger this behavior by adding a .loading class to by loading bar. Now once I am done loading I would like to animate out of the keyframes. Say, for example at the time that I finish loading the width is animated to 50% I would not have it jump to 100%, but ease it to 100% where it should stay.
I have tried adding a transition and animation to my loading bar class, but neither seems to be working. How do I go about this?
Here's the jsFiddle.
You can use the animationiteration (MDN) event to detect when the animation reaches the end of a loop and then remove the class.
$('#bar').on('webkitAnimationIteration', function(e){
$('#bar').removeClass('loading').off('webkitAnimationIteration');
});
I've updated the fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/
-
For simplicity I've only added the webkit prefix to the the fiddle but there is a useful article about css animation events in javascript here http://www.sitepoint.com/css3-animation-javascript-event-handlers/ where they share a little function to simplify using the prefixes you could use to support other browsers.
I upvoted #Jedidiah answer, I think that is what you need.
BTW, If you are interested in an alternative, simple CSS3 solution, then add to your #bar:
transition: all 1s;
-webkit-transition: all 1s
Running Demo
Potential drawbacks (depending on your needs):
It won't respect the previous speed of the progressbar (no matter if you are at 10% or 90%, the remaining part will take 1 second to complete... but this is how often the progressbars of the installers work, so it may not be a problem);
It won't run all the animation: if you are in the first half, it will fill to the left, instead of completing all the round.
I applied the following CSS transform to an HTML input box.
-webkit-transform: scale(.5);
When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret and the text would scroll as you type.
The text does eventually start scrolling once the caret has gone the width of the pre-scaled input. The browser seems to be ignoring the scaling when calculating when to scroll the text.
This is only an issue with WebKit browsers (tested with Chrome and iPad). The -moz-transform equivalent works fine in FireFox. The zoom property works fine in webkit, but it isn't nearly smooth enough when scaling on the iPad, so I can't really use it for my project.
You can see an example here: http://jsfiddle.net/4Kv6w/
The first input box is with the -webkit-transform scaling. The second box is with zoom set. The third is normal.
Any help would be greatly appreciated.
EDIT - You can also get the problem without scaling, by using -webkit-transform to move the input box to the left. Here's an example: http://jsfiddle.net/4Kv6w/15/
It seems there is a bug in WebKit when using a CSS transform to move an input box to the left. When you scale down an input box, it essentially moves the right edge to the left, which is how I was experiencing the problem.
The workaround for me was to position the input box way to the left
left: -2000px;
position: absolute;
and then move it back with the CSS transform.
-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0);
You can see an example here: http://jsfiddle.net/4Kv6w/17/
Hey I'm assuming you're trying to animate the change. You will probably have better results using CSS transitions instead of a transform if that's the case. I've created a fiddle for you to see and try it out for yourself.
jsfiddle
Basically, I have a js event listener listening for when the textbox gets focus. Then I change the width in the js and the transition takes care of the animation. Hopefully this takes care of your issue.