css3

Awesome and Simple Webkit Tricks

In this , we come with useful, awesome and simple webkit tricks. with the help of this you understand css better/

The basic pattern for all of the above mentioned animations is the following:

  1. In CSS, tell WebKit that, for an element or group of elements, when a specific property changes, it should transition from one state to another over a set duration and using a particular timing function (also called an “easing algorithm”).
  2. Also in CSS, set the initial state of the element and the state to which the element is to transition.
  3. Either in CSS (using the
    :hover

    pseudo-class) or in JavaScript (by toggling a class name), initiate the transition by setting a new state for the property in question.

Here’s a simple example. First, the CSS:

#mydiv {

  -webkit-transition-property: opacity;

  -webkit-transition-duration: 1500ms;

  -webkit-transition-timing-function: ease;

  opacity: 1.0;

}

#mydiv.faded {

  opacity: 0.0;

}

The CSS just implements steps 1 & 2 above.

Next, the JavaScript:

document

  .getElementById('mydiv')

  .addEventListener('click', function () {

  this.className = 'faded' === this.className ? '' : 'faded';

}, false);

The above code sets up our DIV to listen for click events. When you click the DIV, it checks whether the class name is ‘faded’. If it is, it sets the class name to nothing. If it’s not, it sets it to ‘faded’. Try it for yourself:

Click me!

Pretty cool, eh? Read everything there is to know about this stuff in the official documentation from Apple.

Bonus!

As promised, here is a little bonus technique: key-framed animations. This is sweet. First, try the example below:

Click me!

In a WebKit-based browser, you should see the DIV grow to about twice it’s “normal” size, then pop back to actual size. The code for this animation is only a little more complex than the previous example, and it builds on what we already know.

Here’s the CSS:

@-webkit-keyframes pop {

  0%   { -webkit-transform: scale(0.5); }

  70%  { -webkit-transform: scale(2.0); }

  100% { -webkit-transform: scale(1.0); }

}

#popper {

  -webkit-transform: scale(0.5);

}

#popper.popping {

  -webkit-transform: scale(1.0);

  -webkit-animation-name: pop;

  -webkit-animation-duration: 250ms;

  -webkit-animation-timing-function: ease-in-out;

}

In the CSS, the first thing we’re doing is creating an animation (

@-webkit-keyframes

) with the name “pop”. Our animation has three states: 0%, our starting state; 70%, the state we want our element in when 70% of the duration has elapsed; and, 100%, our ending state.

Next, we set the initial state for the element to be scaled down to 50% of “actual” size (

-webkit-transform: scale(0.5);

) and declare that when the class “popping” is added to the element we will use the “pop” animation sequence to transition to our ending state (

-webkit-transform: scale(1.0);

) over 250 milliseconds and using the

ease-in-out

timing function.

The JavaScript is essentially the same as before. Only the DIV ID and class names have been changed.

document

  .getElementById('popper')

  .addEventListener('click', function () {

  this.className = 'popping' === this.className ? '' : 'popping';

}, false);

So, that’s it. Pretty cool what WebKit can do. I mentioned earlier that other browsers will hopefully implement these techniques as well.

Related Posts


3 thoughts on “Awesome and Simple Webkit Tricks

  1. basket jordan

    I love the way you wrote this article. This is wonderful. I do hope you intend to write more of these types of articles. Thank you for this interesting content!

    Reply
  2. guild wars 2 gold

    I havenˇt checked in here for a while as I thought it was getting boring, but the last few posts are great quality so I guess Iˇll add you back to my everyday bloglist. You deserve it my friend 🙂

    Reply
  3. Letovanje Grcka 2012

    If some one needs to be updated with most recent technologies
    afterward he must be go to see this website and be up to date daily.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*