One of the developments that integrates and WebKit Mobile Safari also draws are the CSS Animations, a proposal by the development team WebKit with which we can define animations in our files associated CSS. . divSlide (-WebKit-animation-name: "slide-me-to-the-right";-WebKit-animation-duration: [...]
One of the developments that integrates and WebKit Mobile Safari also draws are the CSS Animations, a proposal by the development team WebKit with which we can define animations in our files associated CSS.
. divSlide (
- WebKit-animation-name: "slide-me-to-the-right";
- WebKit-animation-duration: 1s;
)
@-WebKit-keyframes "slide-me-to-the-right" (
(from left: 0px;)
to (left: 100px;)
)
This code is one that produces the magic that we can see from this example of MyDailyPhoto (Requires iPhone 2.0). In can see that by integrating the events of the iPhone touch / iTouch is changing the types of items to which they apply styles. Gutting a little more code:
. CLASS (
- WebKit-animation-name: "ANIMATION_NAME";
- WebKit-animation-duration: 1s;
)
On the one hand we define the animation-WebKit-animation-name, and the duration of animation-WebKit-animation-duration. Once defined animation we will define body of animation:
@-WebKit-keyframes "ANIMATION_NAME" (
(from left: 0px;)
to (left: 100px;)
)
In this case animation animation amending left of the element to which you have specified the class to move CLASS 100px. Thanks to the possibilities that CSS Animations offer us can do things like these:
/ / Turn left
. Flip-left (
- WebKit-animation-name: "flip-left";
- WebKit-backface-visibility: hidden;
)
@-WebKit-keyframes flip-left (
from (-WebKit-transform: RotateY (180deg);)
to (-WebKit-transform: RotateY (0deg);)
)
/ / Turn right
. Flip-Right (
- WebKit-animation-name: "flip-right";
- WebKit-backface-visibility: hidden;
)
@-WebKit-keyframes flip-right (
from (-WebKit-transform: RotateY (0deg);)
to (-WebKit-transform: RotateY (180deg);)
)
/ / We appear element
. show (
- WebKit-animation-name: 'show';
- WebKit-animation-duration: 1s;
)
@-WebKit-keyframes show (
from (opacity: 0;)
to (opacity: 1;)
)
Using these properties and a little PHP he mounted a small gallery of images (there are only 3 photos) on a trial basis for the veais that can be cool.
More
Since Wayne Pan find a role with which JS find an animation easily.
var findAnimation = function (name) (
var ret_rule = null, sheets = document.styleSheets;
for (var i = sheets.length - 1 i> = 0; i -) (
var = sheet sheets [i];
for (var j = sheet.cssRules.length - 1; j> = 0; j -) (
var rule = sheet.cssRules [j];
/ / 7 means the rule keyframe
if (rule.type === 7 & & rule.name == name) (
ret_rule = rule;
break;
)
)
)
Return ret_rule;
)
findAnimation ( 'shrink-n-grow-animation'). findRule ('50% '). style.height ='25px';
