I have a custom animation in CSS3 which I can transition into view, but I cannot transition it out. Take a look at my Fiddle here: http://jsfiddle.net/spryno724/SW8Ly/. Note that this transition is only working in Webkit browsers as of now.
Try rolling your mouse over the styled text input. The background transitions from white into a blueish color when you roll your mouse over the text field, but it does not transition from blue to white.
I thought the ease-in-out property would take care of this, but it appears only to do so for pre-defined animations.
How can I transition from blue to white on mouse out?
Thank you for your time.
Why not use the default (-webkit-)transition method? Doesn't seem you want to do something strange at all. Just look to this jsfiddle: http://jsfiddle.net/savver/SW8Ly/2/
See this for the effects: http://www.css3.info/preview/css3-transitions/ Just scroll down and you'll see what every property does.
Related
I want to fade an article's content to white to signify that further content can be unlocked. I can achieve this by adding an :after element with a white gradient.
But this techniques makes the text under the area under the gradient awkwardly unselectable and unresponsive to hover effects.
How can I produce a similar effect, and still let the user interact properly with the content underneath the gradient?
You can set pointer-events: none on :after
More info and an example: https://css-tricks.com/almanac/properties/p/pointer-events/
Here's the codepen: http://codepen.io/zakkain/pen/dseHt used in aforementioned example.
I have also added a fiddle as an example: https://jsfiddle.net/quzoqone/4/
Use this library: AnimateCSS
There's a lot of cool effects including fadeIn
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 <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
http://jsfiddle.net/pCeGu/
See JsFiddle above. Note the itty bitty arrow that pops under the buttons. Is it possible to make that thing fade in/out with the other elements?
Per this question: CSS :after hover Transition
Apparently Firefox 4 is the only browser that currently supports the transitioning of pseudo elements:(
Consider using a unicode graphical character with some absolute positioning as part of your link, instead of using :after.
See: What characters can be used for up/down triangle (arrow without stem) for display in HTML?
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.