I tried to flip an image and then rotate it using css.
This is the page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> Mounts </title>
<style type="text/css">
img {
-webkit-transform: rotate(180deg);
-webkit-transform: scaleX(-1);
}
</style>
</head>
<body>
<img src='1.jpg'>
</body>
</html>
But one of the transform functions was disabled by chrome.
Is it illegal to use more than one transform function ?
You can combine them in one statement:
transform: rotate(180deg) scaleX(-1);
Or you could use the matrix property: http://www.w3schools.com/css3/css3_2dtransforms.asp
There's even generators for the code, such as: http://www.css3maker.com/css3-transform.html
I had problems with Lea Verou's rotating sign too. It did not work without modification in webkit. This is how I solved it:
<style>
div {
width: 9em;
padding: .6em 1em;
margin: 2em auto;
background: yellowgreen;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-play-state: paused;
animation: spin 1s linear infinite;
animation-play-state: paused;
}
#keyframes spin {
to {
transform: rotate(1turn);
}
}
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
}
div:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
</style>
<div ontouchstart="">Hover over me and watch me spin!</div>
I had that problem and I could solve it in this way:
(I just wanted to rotate and flap a photo with class of left-img)
(and enjoy;))
.left-img{
-webkit-transform:rotate(-90deg) scaleX(-1);
-moz-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
}
Related
i'm studying css3 animation from a playlist in youtube , i made a box comes from top and make swing
my problem is that when make a swing not starting where first animation left, here's the code :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box">
<span>X</span>
</div>
</div>
</body>
</html>
CSS :
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 200px;
margin:0 auto;
transform: translateY(100px);
background: red;
transform-origin: 10px 10px;
animation: box 2s forwards,mm 1s 3s linear forwards;
}
span{
border:2px solid yellow;
background-color: yellow;
}
#keyframes box {
0%{
transform: translateY(-200px);opacity: 0;
}
70%{
transform: translateY(150px);
}
100%{
transform: translateY(100px); opacity: 1;
}
}
#keyframes mm {
0%{
transform: translateY(100px);transform: rotateZ(0deg);
}
40%{
transform: translateY(100px);transform: rotateZ(90deg);
}
70%{
transform: translateY(100px);transform: rotateZ(70deg);
}
100%{
transform: translateY(100px);transform: rotateZ(75deg);
}
}
wheres the problem ?
here's the video that i watched for this animation: CSS Animation Tutorial #11 - Animating a Pop-up
you've done it wrong in 'mm' keyframes,
when you are writing transform, you are doing
transform: translateY(100px);
transform: rotateZ(0deg);
and this first transform property gets overridden by the second transform property (Cascading), so writing it like this would fix it.
#keyframes mm {
0%{
transform: translateY(100px) rotateZ(0deg);
}
40%{
transform: translateY(100px) rotateZ(90deg);
}
70%{
transform: translateY(100px) rotateZ(70deg);
}
100%{
transform: translateY(100px) rotateZ(75deg);
}
}
Checkout the codepen here
I am trying to pause the animation(which is a CSS transformY) state on hover but the hover is not evenly detected accross the transform range(i observed it is properly detected in the initial range and after the transform ends)
This is the code(i simplified it to minimum for posting) :
<html>
<head>
<style>
.member{
height:50px;
width:50px;
margin:30px;
border-radius:50%;
border:1px solid #AAAAAA;
background-color:black;
transition:all 0.3s ease;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6s;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateX(200px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateX(200px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes dropHeader {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.member:hover{
border:3px solid #ffffff;
box-shadow: 0px 0px 0px 3px #7ec0ee;
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="member">
</div>
</body>
</html>
Okay, here is the thing, i couldn't figure out the exact reason but these are all the things i tried and failed and then succeeded (in order) :
1. Removing -webkit
2. using jquery mouseover and mouseout integrated with css animationstates "running" and pause.
3. Then, i observed that after one hover if i click multiple times somewhere else on the webapage and then hover, it worked! Which gave me a hint to the direction of introducing multiple such divs and it totally works fine now.
Can somebody help me, please. I'm starting with css animations and transforms. What i want is an infinite rotation of a division (with svg inside). My css/html5 concoction works fine in Firefox but not in Google Chrome. I'm not sure where the problem lies. This is the link:
Infinite CSS Rotation
And a second step I want to control the animation with jQuery. This again doesn't work in Chrome but it does in FF. The link to this extended example:
Infinite CSS Rotation with jQuery control
Any clue will be much appreciated.
Try this,you forgot #keyframe and -webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container {
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;}
#rotate1 {
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
}
#keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
#-webkit-keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
Here is a simple example based on:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
at the bottom of the page it provides a webkit animation demo which I edited in order to demonstrate the -webkit-animation-play-state
jsfiddle
In short it could be accomplished by detecting the current animation state, and based on that set -webkit-animation-play-state to running or paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
click
js:
$('a').click(function(){
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running"){
$p.css("-webkit-animation-play-state", "paused");
} else {
$p.css("-webkit-animation-play-state", "running");
}
return false;
})
css:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Rotate division infinite using css and html
css code is :
<style>
div{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
div in HTML
<html>
<body>
<div><img src="xyz.png" height="200px" width="200px"/></div>
</body>
</html>
in div a image rotate infinite
OK noobs. Need this circle to scale and fade in once at the beginning of the animation (while spinning) and continue to spin thereafter. Not that hard right!?! Got the fade and spin working but scale just refuses to work!
Is there a fat finger somewhere? Before I rip out what hair I have left, please expose my noobness and why SCALE is not working? Thank you, that is all...
Latest FF only. (To lazy to code for everything else.)
JS Fiddle EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
div
{width: 100px;
height: 100px;
background: transparent;
border: solid 10px blue;
border-radius: 50%;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
-moz-animation-name: scaleIn,fadeIn,spin;
-moz-animation-duration: 1s,1s,1s;
-moz-animation-timing-function: ease-in,ease-in,linear;
-moz-animation-delay: 0,0,0;
-moz-animation-iteration-count: 1,1,infinite;
-moz-animation-direction: normal,normal,normal;
-moz-animation-fill-mode: forwards,forwards,forwards;
-moz-animation-play-state: running,running,running;}
#-moz-keyframes scaleIn
{
from {-moz-transform: scale(2);}
to {-moz-transform: scale(1);}
}
#-moz-keyframes fadeIn
{
from {opacity: 0.0;}
to {opacity: 1.0;}
}
#-moz-keyframes spin
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
It's because -moz-transform:rotate() is overriding -moz-transform:scale(). They need to be together
jsFiddle
#-moz-keyframes transformIn {
from {
-moz-transform: scale(2) rotate(0deg);
}
to {
-moz-transform: scale(1) rotate(360deg);
}
}
As for how to get it to rotate and scale and then just rotate, you will need to make another #keyframes
jsFiddle
#-moz-keyframes transformAnim {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
FYI your -moz-animation-fill-mode rule was breaking the 3rd animation for me :s not sure why, remove it seems to work fine.
Following simple POC code's translateZ works on Firefox, but it doesn't work on Chrome. The translateX, translateY part works on both browsers. What is wrong with the code? Thanks.
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css" />
<style type="text/css">
#-webkit-keyframes test1KeyFrames{
from{
-webkit-transform: translateZ(0px) translateY(0px) translateX(0px);
}
to{
-webkit-transform: translateZ(-1000px) translateY(100px) translateX(100px);
}
}
#-moz-keyframes mozTest1KeyFrames{
from{
-moz-transform: translateZ(0px) translateY(0px) translateX(0px);
}
to{
-moz-transform: translateZ(-1000px) translateY(100px) translateX(100px);
}
}
.test1{
-webkit-transform-origin: 50% 50%;
-webkit-transform-style:preserve-3d;
-webkit-animation-name: test1KeyFrames;
-webkit-animation-duration: 5s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
-webkit-backface-visibility: visible;
}
.mozTest1{
-moz-transform-origin: 50% 50%;
-moz-transform-style:preserve-3d;
-moz-animation-name: mozTest1KeyFrames;
-moz-animation-duration: 5s;
-moz-animation-direction: normal;
-moz-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
-moz-backface-visibility: visible;
}
</style>
</head>
<body>
<div style="border:1px solid red; -webkit-perspective: 100px; -webkit-perspective-origin:240px 140px; -webkit-transform-style:preserve-3d; -moz-perspective: 100px; -moz-perspective-origin:240px 140px; -moz-transform-style:preserve-3d;" >
<div id="slider1" class="mozTest1 test1" style="border:2px solid blue; width:480px; height:280px; background:url(img3.jpg)">
</div>
<image src="img1.jpg" class="test1 mozTest1"/>
<p class="test1 mozTest1">Hello world</p>
</div>
</body>
Win XP vs. Win 7 Difference
There is at least one other who experienced this difference between Win XP and Win 7 regarding translateZ, as this issue report notes (though it was not resolved).
Whether the difference is a bug or a feature upgrade from a 32-bit to 64-bit system is unclear. In either case, there is probably not a solution you can do through your CSS coding to resolve it.