#anim1 iframe {
-webkit-transition: -webkit-transform 1s ease-in-out;
-webkit-transform: rotate3d(0,1,1, 30deg);
transition: transform 1s ease-in-out;
transform: rotate3d(0,1,1, 30deg);
}
#anim1 iframe:hover {
-webkit-transform: rotate3d(1, 0, 76, 50deg);
transform: rotate3d(0,0,1, 30deg);
}
It's working on Chrome but not in Firefox, and of course in IE.Is there any way to fix this?
-webkit is a vendor prefix, and so only takes effect in webkit based browsers (of which firefox isn't one).
Firefox is Mozilla based, and its vendor prefix is -moz. So look up the equivalent styles (e.g. -moz-transition) and check whether it accepts the same syntax (I believe that it does).
Related
I have two components and a fade-in/fade-out animation set up for them.
For a brief moment, both components exist on the page at different opacities, and the scrollbar shows up and disappears.
Is there a way to avoid this? A way to start the fade-in animation only after the fade-out animation is done?
The Animation:
.view-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
transition-delay: 0.5s; /* Increasing this doesn't seem to work */
}
.view-enter, .view-leave-to {
opacity: 0.5; /* It should be 1, but setting it to 0.5 allows you to see exactly what's happening */
}
.view-enter-to, .view-leave {
opacity: 1;
}
Any help would be very much appriciated!
To further elaborate on my comment: VueJS transition components support the mode property, where you can specify the sequence of transitions when toggling between two elements.
Since you do not want both elements to appear at the same time when one is transitioning in while the other is transitioning out, you should be using:
mode="out-in"
Based on the documentation:
out-in: Current element transitions out first, then when complete, the new element transitions in.
This is a very specific bug - however, I would love for someone to show me a workaround! The bug basically consists in IE10 failing to do CSS animation of background-position when these two conditions are met at the same time:
Having multiple backgrounds
Setting background-position in percent
Here's a demo, compare Chrome with IE10:
http://codepen.io/dalgard/pen/LiyIK
You need to put a percentage sign after the zeros.
It must be so:
#keyframes move {
0% { background-position: 0%, 0%; }
100% { background-position: 0%, 100%; }
}
Using LESS CSS, I would like to simplify my code using Mixins to put "out" transitions declarations, but the following syntax is wrong. The problem is in the attribute #color-time definition that has 2 arguments:
.links-transition (#color-time:color 1s, border-color 1s)
{
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a
{
color:red;
.links-transition;
}
In official documentation I found that putting a ; at the end, teach LESS how to consider arguments, considering them separated by ;, so one argument in my case like this:
.links-transition (#color-time:color 1s, border-color 1s;)
Unfortunately this does not run. I think it depends since white space... is there a correct syntax to obtain the correct CSS without using 2 arguments in Mixin recall?
Thank you.
You can use string escaping and interpolation like this:
.links-transition (#arg:"color 1s, border-color 1s") {
#color-time: ~"#{arg}";
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a {
color:red;
.links-transition ("color 2s, border-color 2s");
}
it will return this CSS:
a {
color: red;
-webkit-transition: color 2s, border-color 2s;
-moz-transition: color 2s, border-color 2s;
-ms-transition: color 2s, border-color 2s;
-o-transition: color 2s, border-color 2s;
transition: color 2s, border-color 2s;
}
hope this does what you want.
For more ideas: there are some additinal approaches/solutions that you can find on SO, like this two for example:
Less CSS: Mixins with Variable Number of Arguments
Multiple properties are getting treated as separate arguments in mixins
Update: in LESS 1.4 beta it works the way you wanted to do it:
.links-transition (#color-time: color 1s, border-color 1s;) {
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a {
color:red;
.links-transition (color 2s, border-color 2s;);
}
has the same output as the above solution. Comma separated argunets are possible since 1.3.2, however they can apparently not include whitespaces.
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}
I am trying to do a images gallery for mobile webkit,
The only way it is actually fast enough is using the hardware accelerated translateX .
My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div
You can see an example here, in the callback events section:
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
#-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
Do not use webkit animation for this as it comes back to the default values once played.
Instead define
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%) translateZ(0);
}
Follow Guillaume's advice beyond that.
Use:
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!