Is there a way to gradually transition from normal text into italics changing the slant angle ever so slightly with each character?
Robin's idea does work (DEMO), but there are so many things wrong with that fiddle I wasn't sure I could fit them into one comment.
First of all, span is an inline element and transform works on block elements. So you either use a block element like div or p or you set display: block on the span.
Don't use skew! Use skewX. skew was present in the early drafts and it has been removed since. It isn't even supported by Firefox 14, though it was reintroduced in Firefox 15 due to compatibility reasons and still works in Chrome, Safari and Opera.
Always put the unprefixed version last. Transforms should be unprefixed in the coming versions of Firefox, Opera and IE.
You also need a dot in front of the class name.
Something like this:
<div class="skewme">Tyrannosaurus Rex</div>
with the CSS part being simply
.skewme {
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
In order to gradually transition from the normal text to the slanted text you'll need transitions or keyframe animations.
HTML:
<div class="skewme1">Tyrannosaurus Rex</div>
CSS:
.skewme1 {
-webkit-animation: slowskew 1.5s infinite alternate;
-moz-animation: slowskew 1.5s infinite alternate;
-o-animation: slowskew 1.5s infinite alternate;
animation: slowskew 1.5s infinite alternate;
}
#-webkit-keyframes slowskew {
to { -webkit-transform: skewX(-20deg); }
}
#-moz-keyframes slowskew {
to { -moz-transform: skewX(-20deg); }
}
#-o-keyframes slowskew {
to { -o-transform: skewX(-20deg); }
}
#keyframes slowskew {
to { transform: skewX(-20deg); }
}
Your font may well have completely different glyphs for italics and normal text, so even morphing between them using SVG crazy-clever might look weird.
An alternative would be to apply a CSS3 2D skew transform. This won't transition between the normal and italic forms, but would just slant the normal form. This may or may not give you a visually-appealing result, depending on your font. It's also not supported in older browsers.
Not with italics no, you’ve only got a choice of normal or italic (and oblique which has a specific meaning in typography but generally not on standard web fonts).
You could however fake it in a really nasty fashion with CSS transforms. E.g.:
<span class="skew0">R</span><span class="skew1">R</span><span class="skew2">R</span><span class="skew3">R</span>
and:
span { display: inline-block; }
.skew1 { transform: skewX(-5deg); }
.skew2 { transform: skewX(-10deg); }
.skew3 { transform: skewX(-15deg); }
skew() is in danger of being removed from the spec – it’s already been removed from Mozilla but was added back in due to incompatibility worries – and you’ll obviously need to add in the standard vendor prefixes.
Test at: http://jsfiddle.net/GtQXw/1/
Yes - You have to create an image. Otherwise no
You could probably do it through an SVG, but then you'll forfeit the browser support you'd get through an image. IE8 and earlier does not support SVGs, IIRC.
Related
I am making a site that uses some CSS3 keyframes animations.
The guides I have seen suggest using separate code for each browser specifying which code is for what browser as I go along.
eg. This guide which suggests:
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
And this one Which suggests slightly different grouping but essentially the same thing.
However I have seen many articles saying that browser detection is poor practice in modern webpages.
This page (same site as above)
W3C agrees but feels an exception could be made for browser prefixes in css.
Is it possible to use keyframes using an approach that just queries the support of the feature rather than specify a browser?
However I have seen many articles saying that browser detection is poor practice in modern webpages.
Yes, browser detection is not good practice as it is unreliable and likely to break in the (near) future.
However, what you are doing here is not "browser detection" as described in that article. You are using vender prefixes.
Vender prefixes are OK, the accepted way of doing this (implementing a feature that is still considered "draft"). It is the only way of doing this.
"The problem" is that browsers don't necessarily support the "standard" way of doing this yet, ie. without the vendor prefix. Probably because they implemented this before it was a standard; before the "final" implementation has been agreed. In the meantime they implement how they think it will work and use a vendor prefix. The vendor prefix'd rule might not work the same way as the final "standard".
So, the vendor prefix'd version will always (or for a while yet) work in the browser it is designed for. The browser ignores all other vendor prefixed rules (in CSS, if a browser does not understand something it should ignore it). When the browser does implement the standard and starts to support the non-vendor-prefixed rule then that is the rule that will take priority.
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
Ideal results:
bottom of img stays in the same position
img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)
Item should not appear too (if possible) compressed
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
So I produced this to test it out:
<!doctype html>
<style type="text/css">
#popup
{
transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes popupanim
{
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
</style>
<body>
<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
Demo: http://jsfiddle.net/BEy9f/3/
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.
Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).