I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip
and this is the class:
.flip-horizontal-bottom {
-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/**
* ----------------------------------------
* animation flip-horizontal-bottom
* ----------------------------------------
*/
#-webkit-keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
#keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?
From their "How to" notes:
Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.
Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.
Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.
Related
So, it is possible to have reverse animation on mouse out such as:
.class{
transform: rotate(0deg);
}
.class:hover{
transform: rotate(360deg);
}
but, when using #keyframes animation, I couldn't get it to work, e.g:
.class{
animation-name: out;
animation-duration:2s;
}
.class:hover{
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframe in{
to {transform: rotate(360deg);}
}
#keyframe out{
to {transform: rotate(0deg);}
}
What is the optimal solution, knowing that I'd need iterations and animation itself?
http://jsfiddle.net/khalednabil/eWzBm/
I think that if you have a to, you must use a from.
I would think of something like :
#keyframe in {
from: transform: rotate(0deg);
to: transform: rotate(360deg);
}
#keyframe out {
from: transform: rotate(360deg);
to: transform: rotate(0deg);
}
Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :
Chrome uses #-webkit-keyframes, no particuliar version needed
Safari uses #-webkit-keyframes since version 5+
Firefox uses #keyframes since version 16 (v5-15 used #-moz-keyframes)
Opera uses #-webkit-keyframes version 15-22 (only v12 used #-o-keyframes)
Internet Explorer uses #keyframes since version 10+
EDIT :
I came up with that fiddle :
http://jsfiddle.net/JjHNG/35/
Using minimal code. Is it approaching what you were expecting ?
Its much easier than all this: Simply transition the same property on your element
.earth { width: 0.92%; transition: width 1s; }
.earth:hover { width: 50%; transition: width 1s; }
https://codepen.io/lafland/pen/MoEaoG
I don't think this is achievable using only CSS animations. I am assuming that CSS transitions do not fulfil your use case, because (for example) you want to chain two animations together, use multiple stops, iterations, or in some other way exploit the additional power animations grant you.
I've not found any way to trigger a CSS animation specifically on mouse-out without using JavaScript to attach "over" and "out" classes. Although you can use the base CSS declaration trigger an animation when the :hover ends, that same animation will then run on page load. Using "over" and "out" classes you can split the definition into the base (load) declaration and the two animation-trigger declarations.
The CSS for this solution would be:
.class {
/* base element declaration */
}
.class.out {
animation-name: out;
animation-duration:2s;
}
.class.over {
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframes in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
And using JavaScript (jQuery syntax) to bind the classes to the events:
$(".class").hover(
function () {
$(this).removeClass('out').addClass('over');
},
function () {
$(this).removeClass('over').addClass('out');
}
);
Creating a reversed animation is kind of overkill to a simple problem. What you need is:
animation-direction: reverse
However, this won't work on its own because animation spec forgot to add a way to restart the animation, so here is how you do it with the help of JS
let item = document.querySelector('.item')
// play normal
item.addEventListener('mouseover', () => {
item.classList.add('active')
})
// play in reverse
item.addEventListener('mouseout', () => {
item.style.opacity = 0 // avoid showing the init style while switching the 'active' class
item.classList.add('in-active')
item.classList.remove('active')
// force dom update
setTimeout(() => {
item.classList.add('active')
item.style.opacity = ''
}, 5)
item.addEventListener('animationend', onanimationend)
})
function onanimationend() {
item.classList.remove('active', 'in-active')
item.removeEventListener('animationend', onanimationend)
}
#keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
div {
background: black;
padding: 1rem;
display: inline-block;
}
.item {
/* because span cant be animated */
display: block;
color: yellow;
font-size: 2rem;
}
.item.active {
animation: spin 1s forwards;
animation-timing-function: ease-in-out;
}
.item.in-active {
animation-direction: reverse;
}
<div>
<span class="item">ABC</span>
</div>
we can use requestAnimationFrame to reset animation and reverse it when browser paints in next frame.
Also use onmouseenter and onmouseout event handlers to reverse animation direction
As per
Any rAFs queued in your event handlers will be executed in the same
frame. Any rAFs queued in a rAF will be executed in the next frame.
function fn(el, isEnter) {
el.className = "";
requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.className = isEnter? "in": "out";
});
});
}
.in{
animation: k 1s forwards;
}
.out{
animation: k 1s forwards;
animation-direction: reverse;
}
#keyframes k
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div style="width:100px; height:100px; background-color:red"
onmouseenter="fn(this, true)"
onmouseleave="fn(this, false)"
></div>
Would you be better off having just the one animation, but having it reverse?
animation-direction: reverse
Using transform in combination with transition works flawlessly for me:
.ani-grow {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ani-grow:hover {
transform: scale(1.01);
}
I've put together a CodePen with a CSS-only fix and one with 2 lines of jQuery to fix the on-page load issue. Continue reading to understand the 2 solutions in a simpler version.
https://codepen.io/MateoStabio/pen/jOVvwrM
If you are searching how to do this with CSS only, Xaltar's answer is simple, straightforward, and is the correct solution. The only downside is that the animation for the mouse out will play when the page loads. This happens because to make this work, you style your element with the OUT animation and the :hover with the IN animation.
svg path{
animation: animateLogoOut 1s;
}
svg:hover path{
animation: animateLogoIn 1s;
}
#keyframes animateLogoIn {
from {stroke-dashoffset: -510px;}
to {stroke-dashoffset: 0px;}
}
#keyframes animateLogoOut {
from {stroke-dashoffset: 0px;}
to {stroke-dashoffset: -510px;}
}
Some people found this solution to be useless as it played on page load. For me, this was the perfect solution. But I made a Codepen with both solutions as I will probably need them in the near future.
If you do not want the CSS animation on page load, you will need to use a tiny little script of JS that styles the element with the OUT animation only after the element has been hovered for the first time. We will do this by adding a class of .wasHovered to the element and style the added class with the OUT Animation.
jQuery:
$("svg").mouseout(function() {
$(this).addClass("wasHovered");
});
CSS:
svg path{
}
svg.wasHovered path{
animation: animateLogoOut 1s;
}
svg:hover path{
animation: animateLogoIn 1s;
}
#keyframes animateLogoIn {
from {stroke-dashoffset: -510px;}
to {stroke-dashoffset: 0px;}
}
#keyframes animateLogoOut {
from {stroke-dashoffset: 0px;}
to {stroke-dashoffset: -510px;}
}
And voila! You can find all of this and more on my codepen showing in detail the 2 options with an SVG logo hover animation.
https://codepen.io/MateoStabio/pen/jOVvwrM
Have tried several solutions here, nothing worked flawlessly; then Searched the web a bit more, to find GSAP at https://greensock.com/ (subject to license, but it's pretty permissive); once you reference the lib ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
... you can go:
var el = document.getElementById('divID');
// create a timeline for this element in paused state
var tl = new TimelineMax({paused: true});
// create your tween of the timeline in a variable
tl
.set(el,{willChange:"transform"})
.to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});
// store the tween timeline in the javascript DOM node
el.animation = tl;
//create the event handler
$(el).on("mouseenter",function(){
//this.style.willChange = 'transform';
this.animation.play();
}).on("mouseleave",function(){
//this.style.willChange = 'auto';
this.animation.reverse();
});
And it will work flawlessly.
Try this:
#keyframe in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframe out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
supported in Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+
I am trying to animate an element's transform property, but I noticed it's not working as I expect on IE (surprisingly).
when animating from
0% { transform: translateX(-50%) translateY(150px); }
to
100% { transform: translateX(-50%); }
It seems to ignore the translateX(-50%);
This is the way I use the animation on the html element (I use forwards so the final state of the animation is the one that remains applied to the element):
animation: myanimation 1s ease-out forwards;
I've being trying to solve this for a while, even trying from translate(-50%, 150px) to translate(-50%, 0px) but still it won't work.
Here's a working fiddle to quickly see the difference. It works well on Chrome, but misbehaves on IE.
use transform: translate(X, Y) it works on IE ( use vendor prefix for IE9 -ms-transform )
#keyframes myanimation {
0% { transform: translate(50%, 150px); } /* i suppose -50% is a typo, if it's not replace it with -50% */
100% { transform: translate(-50%, 0); }
}
#anim {
display: inline-block;
animation: myanimation 1s ease-out forwards;
}
<h1 id="anim">Hello World</h1>
You want to animate X from -50% to -50%? If you want to animate the Y coordinate, then set the value on your target percent.
100% { transform: translateX(-50%) translateY(0); }
why not? This works on IE. I've tested.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Sorry if none of this makes sense and if my formatting is poor (I'm very new to coding). I'm trying to create a page where I have an image and it mirrors itself horizontally every second or so. Essentially the image flips back and forth forever. I was able to get the timer thing to work so it changes between the two images every second, and I was also able to create the mirrored image, but I don't know how to reference it elsewhere in the code. Like I don't know how to label images[1]="theflippedimage" or something. Here's what I have so far:
<head>
<script type="text/javascript">
function nextImage(){
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src=images[x];
}
function previousImage() {
x = (x <=0) ? images.length - 1: x - 1;
document.getElementById("img").src=images[x];
}
function startTimer() {
setInterval(nextImage,1000);
}
var images= [], x= -1;
images[0]="http://www.honda-perf.net/images/thumbs/cat.jpg"
<img style='border:0';
transform:scale(-1,1);
-webkit-transform:scale(-1,1);
-moz-transform:scale(-1,1);
-o-transform:scale(-1,1);
src="http://www.honda-perf.net/images/thumbs/cat.jpg/>;
</script>
</head>
<body onload="startTimer()">
<img id="img" src="http://www.honda-perf.net/images/thumbs/cat.jpg">
</body>
The effect can be achieved relatively easy using CSS animations.
In your html you will have the body element containing an image with an id of img as in your example:
<body>
<img id="img" src="http://www.honda-perf.net/images/thumbs/cat.jpg">
</body>
The animation using CSS3 would look like this:
#img {
-webkit-animation: horizontalflip 5s infinite;
-moz-animation: horizontalflip 5s infinite;
-o-animation: horizontalflip 5s infinite;
/* Chrome, Safari, Opera */
animation: horizontalflip 5s infinite;
}
#-webkit-keyframes horizontalflip {
0% {
transform: scale(1,1);
}
50% {
transform: scale(-1,1);
}
100%{
transform: scale(1,1);
}
}
#-moz-keyframes horizontalflip {
0% {
transform: scale(1,1);
}
50% {
transform: scale(-1,1);
}
100%{
transform: scale(1,1);
}
}
#-o-keyframes horizontalflip {
0% {
transform: scale(1,1);
}
50% {
transform: scale(-1,1);
}
100%{
transform: scale(1,1);
}
}
#keyframes horizontalflip {
0% {
transform: scale(1,1);
}
50% {
transform: scale(-1,1);
}
100%{
transform: scale(1,1);
}
}
The code above works in all the modern browsers supporting CSS 3. The explanation for the animation code would be that:
On the #img element I run an animation, which I named horizontalflip. The full animation takes 5 seconds to complete and it will run infinitely. You can change the time value to something that you consider fit if 5 seconds seem too much.
The next blocks of code (that contain #-vendorprefix-keyframes) describe what happens with the animation. Every 2.5 seconds (50% of the time defined at point 1), the image mirrors itself horizontally. The animation itself is pretty trivial, but you have to do each vendor prefix individually.
Working JS fiddle: https://jsfiddle.net/vuc4pxsk/1/
I hope I understood correctly your requirements.
For more information about CSS 3 animations, please see:
https://css-tricks.com/almanac/properties/a/animation/
Why certain css does not work on IE?
For Example: on this page, it work on chrome perfectly and it does not work on IE.
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
from the tutorial on this page:
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
I added some code on the css:
inside .ball:
{
animation-duration:1s;
animation-name:spinoff;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
new key frames:
#keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
Tested on IE11 and it is not working.
I am very confuse why it does not work on IE11...
UPDATE
It was my mistake that copy and paste the thing without realizing the mistake.
I had solved the mistake through the code below:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Thanks for raptor to pointing out my mistake.
Try the follow to give it support to other browsers and make it work in IE
-moz Mozilla
-webkit Chrome and Safari
-o- Opera
-ms Internet Explorer
and obviously without it for older versions or non famous ones
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.