Learn Oracle with Yasser: ANIMATION with CSS

ANIMATION with CSS

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

Binding the "myfirst" animation to a div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

CSS keyframe animations open up a vast range of possibilities for what can be accomplished with CSS. Much more than simple, one-step transitions, keyframes can be used to achieve complex, multi-step animations that are quite impressive.

In today’s project, we’re going to start from scratch and build a stack of two photos that spread out and swap their stacking order when you hover over them. Along the way we’ll learn all about how to wield keyframes like a pro and juggle all of those head-spinning prefixes!

What We’re Building

The concept for this project is pretty simple. Imagine two photos, randomly rotated and stacked on top of each other as if you had thrown them on a desk. The problem is, you can only really see the photo on the top!

To help that bottom photo get the attention that it deserves, we’re going to create a hover event that first separates the two photos, then slides the top photo in behind the bottom photo, effectively changing the stacking order.

Odds are, if you read this blog, you’re a visual thinker, so here’s what this looks like in pictures:

Keyframe Animations vs. Transitions

CSS currently has two primary options for animating an element: transitions and keyframes. Each time you want to animate something, you have to analyze the situation and decide which method is appropriate. Fortunately, deciding between the two is really easy.

Any time you have a simple animation with only a single step, a transition is the perfect solution. For instance, if you want something to rotate slightly when you hover over it, you’d probably pull off the effect with a transition. You simply set the original state, then the rotated state, and transition between the two.

Now, imagine that you wanted to take this idea further and create an animated dial like you’d see to crack a safe. You’d probably want it to spin clockwise for a second, then counterclockwise, then maybe clockwise again, you get the idea. For this scenario, you’d definitely want to go with a keyframe animation.

Which Should We Use?

Above, we outlined the animation that we want to achieve. Obviously, it’s going to be pretty complex. Multiple items will be moving back and forth, rotating and swapping their stacking order. Given this complexity, keyframe animations are the natural choice.

Browser Support

It’s good to keep in mind that both keyframes and transitions now have pretty decent support on the major browsers… except of course for IE. As far as I can tell, neither transitions nor animations will be supported until IE10, so you obviously don’t want to rely on them for any major functionality.

Step 1. The HTML

Enough build up, let’s jump into building this sucker. The first thing to do is lay out the project in HTML. This is of course extremely easy. All we need is a container with two images.

</div>

We could scrap the classes and use some fancy selectors to grab each image, but I don’t think this is too markup heavy for what we’re going to accomplish so we’ll stick with this.

Step 2. Basic CSS

Nothing fancy here, just some simple setup to really set the stage nicely for what we’re going to accomplish.

/*BASIC*/

* {margin: 0; padding: 0;}

body {

background: #222;

}

.container {

position: relative;

margin: 30px;

height: 300px;

width: 650px;

}

Step 3. Style the Photos

For the most part, we’ll want both of the photos to look the same, but there will be some differences. In this step though, we want to target both images and include only the styles that we want to apply to both images.

This includes height, width, border, border-radius and box-shadow. This code will give each image a slight shadow and a thin white border.

/*PHOTO SHAPE*/

.picone, .pictwo {

border: 5px solid #fff;

border-radius: 3px;

height: 200px;

margin: 20px;

position: absolute;

width: 300px;

-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

}

Notice that the position here is set to “absolute.” This is so we can easily manipulate the position of each image individually. Since we used relative positioning on the container, the position for these will be defined “relative” to the container bounds.

Progress Check

At this point, your photos should look nice, but since we’ve used absolute positioning, they’ll be stacked on top of each other with only the top image visible.

Step 4. Rotate and Position the Photos

Moving right along, it’s time to help distinguish between the two photos visually. To do this, we want to move “pictwo” to the right and rotate both images using CSS transforms.

We’ll rotate both images by seven degrees, just make sure the first one has a negative value and the second a positive so that they’ll be offset from each other.

/*SPECIFIC PHOTOS*/

.picone {

-webkit-transform: rotate(-7deg);

-moz-transform: rotate(-7deg);

-o-transform: rotate(-7deg);

-ms-transform: rotate(-7deg);

transform: rotate(-7deg);

}

.pictwo {

left: 100px;

-webkit-transform: rotate(7deg);

-moz-transform: rotate(7deg);

-o-transform: rotate(7deg);

-ms-transform: rotate(7deg);

transform: rotate(7deg);

}

Progress Check

At this point, all of our base visual styling is finished. You should have a nice little two photo stack that looks something like this:

Step 5. Plan the Animation

Now that we’ve got the photos set up the way that we like, we need to plan out the specifics of how we’re going to make them move. Since there are two photos, we’ll need to plan the specific movements of each.

Pic One

The first picture starts on the bottom of the stack. Most of the movement will take place on the other photo, but I want to make this one look like it’s moving out of the way and making room for the other one, so we’ll rotate it slightly.

Without worrying about actual syntax, let’s plan out each step. Keyframes use percentages to plot out the animation, so that’s what we’ll use here.

0%: rotate(-7deg)
50%: rotate(-14deg)
100%: rotate(-7deg)

As you can see, we start with our default rotation of -7, then transition to a rotation of -14 and finally rotate back to where we started.

Pic Two

The second photo is much more complicated. This time around, we want to move the photo a few hundred pixels to the right while rotating it, swap it to the bottom of the stack, then bring it back in where it began while remaining on the bottom. Here’s what this looks like:

0%: left 100px, z-index 1, rotate(7deg)
49%: left 350px, z-index 1, rotate(20deg)
50%: left 350px, z-index -3,rotate(20deg)
100%: left 100px, z-index -3, rotate(7deg)

Notice that the steps at 49% and 50% are identical aside from the z-index value. We don’t want this photo to jump to the bottom of the stack until it’s out of the way of the other one, so we have to move it out before jumping it down.

Code the Animation

Now that we’ve conceptually planned out the animation, it’s time to actually code up the CSS versions. Using the progressions that we just came up with, this turns out to be pretty easy. Remember that this is just defining the animations, we’ll implement them later.

/*KEYFRAME ANIMATIONS*/

@keyframes picone {

0% {transform: rotate(-7deg)}

50% {transform: rotate(-14deg)}

100% {transform: rotate(-7deg)}

}

@keyframes pictwo {

0%

{left: 100px; z-index: 1;
  transform: rotate(7deg)}

49%

{left: 350px; z-index: 1;
  transform: rotate(20deg)}

50%

{left: 350px; z-index: -3;
  transform: rotate(20deg)}

100%

{left: 100px; z-index: -3;
  transform: rotate(7deg)}

}

Prefix Mayhem

The absolute worst part of using keyframe animations in CSS is the mess of code that you have to use to pull them off across all of the possible browsers. The code that we just wrote is simple enough, but now we have to repeat it with all of the various prefixes.

There’s actually an important lesson in here though, so this is good practice. The tricky part is that we’ve embedded one property that needs prefixing (transform) inside of another (@keyframes). This leads to a big headache. And by big, I mean over two hundred lines of code big.

“This leads to a big headache. And by big, I mean over two hundred lines of code big.”

For the snippet above, we need to expand out all of the rotates so that they have all four major prefixes (webkit, moz, o, and ms). Then we need to repeat the whole thing while adding the appropriate prefixes to the @keyframe line as well, but within each of these, you only need the standard rotate property along with the prefix that matches the parent keyframe prefix. Confused yet? Me too.

Fortunately, Prefixr is here to save the day. Grab the standard syntax from above and drop it in, then out will come all of the various pieces that you need to make this work.

Are You Kidding Me?

250+ lines of code just to define some simple animations? What am I smoking? Unfortunately, if we want to pull this off with CSS, this is what we’ll need until keyframes become a standard, non-prefixed feature.

The lesson here is to be careful when adding complexity to keyframe animations because it gets insane fast. The second lesson is that jQuery is still often the easiest solution for pulling off simple cross-browser animations!

Activating the Animations

Simply defining keyframe animations doesn’t make anything happen, we need to implement them with the “animation” syntax. To do this, we use the animation syntax.

We want this to happen when we hover over the container, so we use .container:hover, then differentiate based on the class for each of our images.

.container:hover .picone {

-webkit-animation: picone 1.5s 2 alternate;

-moz-animation: picone 1.5s 2 alternate;

-ms-animation: picone 1.5s 2 alternate;

       -o-animation: picone 1.5s
  2

alternate;

          animation:
  picone 1.5s 2

alternate;

}

.container:hover .pictwo {

-webkit-animation: pictwo 1.5s 2 alternate;

-moz-animation: pictwo 1.5s 2 alternate;

-ms-animation: pictwo 1.5s 2 alternate;

       -o-animation: pictwo 1.5s
  2

alternate;

          animation:
  pictwo 1.5s 2

alternate;

}

Here we’ve called the animation using the names we set before, set the length to one and a half seconds, set the iteration to two and then used alternate so that the first iteration runs through the steps in order and the second goes through them backward so we end up where we began.

See it Work!

Good news, we’re all finished. To see the my full code along with a live demo, click on the link below.

CSS Keyframes: Still Not Quite There

In concept, pulling off complex animations with CSS is surprisingly easy. The syntax is straightforward, flexible and easy to pick up.

Unfortunately, the browser support is still short of where we’d like it to be and the code necessary for implementation can get downright crazy when you start integrating other prefixed CSS properties into the mix alongside the keyframes.

That being said, this was still a blast to build and if you made it all the way through you’ll no doubt be a real pro when it comes to keyframe syntax!

<!DOCTYPE html>

<head>

<style>

/*BASIC*/

* {margin: 0; padding: 0;}

body {

background: #222;

}

.container {

position: relative;

margin: 40px;

height: 300px;

width: 650px;

}

/*PHOTO SHAPE*/

.picone, .pictwo {

border: 5px solid #000;

border-radius: 3px;

height: 200px;

margin: 20px;

position: absolute;

width: 300px;

/* -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

box-shadow: 3px 3px 3px rgba(0,0,0,0.3);*/

}

/*SPECIFIC PHOTOS*/

.picone {

-webkit-transform: rotate(-7deg);

-moz-transform: rotate(-7deg);

-o-transform: rotate(-7deg);

-ms-transform: rotate(-7deg);

transform: rotate(-7deg);

}

.pictwo {

left: 100px;

-webkit-transform: rotate(7deg);

-moz-transform: rotate(7deg);

-o-transform: rotate(7deg);

-ms-transform: rotate(7deg);

transform: rotate(7deg);

}

/*KEYFRAME ANIMATIONS*/

@keyframes picone {

0% {transform: rotate(-7deg)}

50% {transform: rotate(-14deg)}

100% {transform: rotate(-7deg)}

}

@keyframes pictwo {

0% {left: 100px; z-index: 1; transform: rotate(7deg)}

49% {left: 350px; z-index: 1; transform: rotate(20deg)}

50% {left: 350px; z-index: -3; transform: rotate(20deg)}

100% {left: 100px; z-index: -3; transform: rotate(7deg)}

}

.container:hover .picone {

-webkit-animation: picone 1.5s 2 alternate;

-moz-animation: picone 1.5s 2 alternate;

-ms-animation: picone 1.5s 2 alternate;

-o-animation: picone 1.5s 2 alternate;

animation: picone 1.5s 2 alternate;

}

.container:hover .pictwo {

-webkit-animation: pictwo 1.5s 2 alternate;

-moz-animation: pictwo 1.5s 2 alternate;

-ms-animation: pictwo 1.5s 2 alternate;

-o-animation: pictwo 1.5s 2 alternate;

animation: pictwo 1.5s 2 alternate;

}

</style>

</head>

<body>

</div>

</body>

</html>

Making text move

h1 {

animation-duration: 3s;

animation-name: slidein;

}

@keyframes slidein {

from {

margin-left: 100%;

width: 300%

}

to {

margin-left: 0%;

width: 100%;

}

Video and animation

<!DOCTYPE html>

<html>

<body>

<h2>Playing the Object</h2>

</body>

</html>

When you press click the video will start:

<h2>Click the Link to Play the Object</h2>

<a href="intro.swf">Play a video file</a>

--- iframe and source from youtube

<!DOCTYPE html>

<html>

<body>

src="http://www.youtube.com/embed/XGSy3_Czz8k">

</iframe>

</body>

</html>

--------- embed

This example to move foto or anything from top till down with interval number of second determined inside div to be able to use it inside html body tag

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:150px;

height:100px;

/*background:red;*/ /* to comment something*/

position:relative;

animation:mymove 50s infinite; /*number of second as interval to move*/

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

}

@keyframes mymove

{

from {top:0px;}

to {top:100px;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {top:0px;}

to {top:200px;}

}

</style>

</head>

<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and

earlier versions.</p>

</body>

</html>

Float = يترحل - opacity = الاشتفافية

translateX() moves the element in the horizontal plane, while translateY() moves it vertically

<!DOCTYPE html>

<html>

<head>

<style>

img.tilt {

width: 300px; height: 300px; float: left;

-moz-transition-property: opacity, translateX;-o-transition-property: opacity, translateX;

-webkit-transition-property: opacity, translateX;

transition-property: opacity, translateX;

-moz-transition-duration: 2s, 4s;

-o-transition-duration: 2s, 4s;

-webkit-transition-duration: 2s, 4s;

transition-duration: 2s, 4s;

}

img.tilt:hover {

opacity: .2;

-webkit-transform: translateX(60px);

-moz-transform: translateX(60px); -ms-transform: translateX(60px);

-o-transform: translateX(60px); transform: translateX(60px);

}

</style>

</head>

<body>

</body>

</html>

Jquery

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

</script>

</head><body><p>If you click on me, I will disappear.</p><p>Click me away!</p><p>Click me too!</p></body></html>

Pages

Tuesday, June 9, 2015

ANIMATION with CSS

What We’re Building

Keyframe Animations vs. Transitions

Which Should We Use?

Browser Support

Step 1. The HTML

Progress Check

Step 4. Rotate and Position the Photos

Progress Check

Step 5. Plan the Animation

Pic One

Pic Two

Code the Animation

Prefix Mayhem

Are You Kidding Me?

Activating the Animations

See it Work!

CSS Keyframes: Still Not Quite There

No comments:

Post a Comment

Interesting Links