more understanding on css transition

A transition occurs when a CSS property changes from one value to another value over a period of time.

You can create CSS Transitions with the transition property:

.selector {
  transition: property duration transition-timing-function delay;

The transition property is a shorthand of four CSS properties, transition-propertytransition-durationtransition-timing-functiontransition-delay.

.selector {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay

  /* The transition property is the shorthand for the above four properties */
  transition: property duration timing-function delay;

transition-property refers to the CSS property you wish to transition. It is required in the transition shorthand.

transition-duration refers to the duration of the transition. How long do you want the transition to last? This value is written in seconds with the s suffix (like 3s). It is also required in the transitionshorthand.

transition-timing-function refers to how to transition occurs. You’ll learn more about this later.

transition-delay refers to how long you want to wait before starting the duration. This value is written in seconds with the s suffix (like 3s). transition-delay is optional in the transition shorthand.

Triggering transitions

You can trigger CSS transitions directly with pseudo classes like :hover(activates when mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).

/* creating transitions directly in CSS */
.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;

.button:hover {
  background-color: #1ce;

You can also trigger CSS transitions through JavaScript by adding or removing a class.

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
} {
  color: #1ce;
const button = document.querySelector('.button')
button.addEventListener('click', _ => button.classList.toggle('is-active'))

Understanding transition-timing-function

The transition-timing-function governs how a transition occurs. All transitions have a value of linear by default, which means the property changes evenly until the end of the transition.

.selector {
  transition: transform 1s linear;

  /* OR */
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;

The thing is, nothing moves linearly in life. That’s not how real objects move. Sometimes, we accelerate; sometimes, we decelerate. The transition-timing-function allows you to capture all of that.

Imagine yourself throwing a tennis ball into an open field. The ball leaves your hand with the maximum speed. As it moves, it loses energy, it decelerates and eventually comes to a halt. This is called ease-out. There’s a timing function for it.

.selector {
  transition-timing-function: ease-out;

Now imagine you’re in a car. It’s not moving right now. When you move the car, it accelerates and goes toward its top speed. This is called ease-in. There’s also a timing function for it.

.selector {
  transition-timing-function: ease-in;

Since you have ease-in and ease-out, there’s also a timing function that combines the two together, ease-in-out. (I advise against using ease-in-out in your transitions unless your transitions last longer than a second. Nothing eases in and out within a second. It simply looks weird.)

.selector {
  transition-timing-function: ease-in-out;

Transitioning two or more properties

You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property.

You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

.selector {
  transition: background-color 1s ease-out,
              color 1s ease-out;

  /* OR */
  transition-property: background, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;

You may be tempted to transition every CSS property with all. Don’t ever do this. This is bad for performance. Always specify the property you’re trying to transition.

.selector {
  transition-property: all

.selector {
  transition-property: background-color, color, transform;

Transitioning in vs transitioning out

Sometimes, you want the properties to transition in and out at differently. You want the duration, timing-function or delay to be different.

To do so, you write another set of transition- properties.

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;

.button:hover {
  background-color: #1ce;
  transition-duration: 2s;

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

FROM HERE, a great article!


polygon in svg and css

in svg we can create triangle like below

<svg height="210" width="500">
  <polygon points="200,10 250,195 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  Sorry, your browser does not support inline SVG.

turns out in css, we have similar stuff called clip-path which take similar parameter and draw the shape.

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

For circle/ellipse, it has specific function, circle and ellipse.

We can do something like

clip-path: circle(50% at 50% 50%);
clip-path: circle(50px at 50px 50px) means at(50px, 50px),clip a circle with radius 50px.

More example here.

Or a 中文文章

debug hover item in chrome devtools

Chrome devtools is our friend, always.

Today when I was developing an angular 4.x app with primeng library, i have to check the class set on the tooltip component. As we know the tooltip is hover event based, so if we hover on it to make it showup and then shift our focus to the dev tool element tab, the tooptip would disappear.

Chrome tool has a feature to activate the hover stuff(:hover) on specific element for CSS sake. It is quite handy but obviously it does not apply in this use case since this tooltip is js based.

Search around and finally find a solution: using F8 or CMD + \ which is pause the script execution.

Steps are quite straightforward:

Mouse over the tooltip, and press F8 while it is displayed.

Now you can now use the inspector to look at the CSS.

Long Text Wrapping in ie9/10 inside table td

Both IE 9 and 10 seem to have problem wrapping long text inside table td element, even we explicitly set the the word-wrap CSS property.

Turns out the solution is we also have a set with and table-layout css to the wrapping table.

/* Both of them are Necessary.*/
.long-text-table {  


<table class="long-text-table">
   <div class="long-text-wrapper"> REALLY LONG TEXT NEED TO WRAP</div>

3d css with perspective and transform rotate

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

 * Syntax
 * perspective: none | &lt;length&gt; 

.parent {
    perspective: 1000px;

.child {
    transform: rotateY(50deg);

Here in the bottom is the some other examples to create cool 3d with hover (transform: rotate(0))effect.

target pseudo class in css3

Basically the :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

we can define ‘:target’ for general purpose.

We can also use it with other css selectors to define specific matching rules.

So if we have a and in the css we have myHash:target{something}

Then the something will be applied to the id=myHash div or whatever container when the anchor <a href=’#myHash‘></a> is clicked.



Psuedo class is good for creating css only modal window. And here is the fiddle.

W3School has some good example about :target.

some other example in css-tricks

This is an interesting way of building modal with JS using IIFE and in an OO way.


transition vs animation in css

CSS animation is definitely the next big step in CSS. Absolutely amazing things can be done with this. It is literally up to your imagination, as you’ll come to realize if you don’t already understand how CSS animations work. HTML5 and javascript continues to replacing what Flash was previously used for, and similarly CSS continues to replace functionality javascript was used to provide. In this article we’re going to cover the CSS animation basics and make sure we’ve learnt it well enough to add it to our development-toolbox.

So, what’s the difference between the Transition property and the Animation property?

There are two basic differences:

  1. The first major difference is that transitions only have a ‘to’ and ‘from’ state. Transitions also only effect once a pseudo class (such as :hover, :focus, :checked, etc) is triggered or removed.
  2. The second notable difference between animations and transitions are @keyframes. Transitions only have two @keyframes (the ‘to’ and ‘from’ states), but animations can have an endless number of @keyframes. The keyframe positions are set with percentage values. You could make a ball spin and bounce up and down with only few lines of CSS (Sort of. Since you’ll have to do everything multiple times with vendor prefixes, the CSS gets quite a bit longer).

Animation syntax

The animation property and keyframes go hand in hand. The animation property’s ‘values’ are the element-to-be-animated’s options and the keyframes are the actions it should follow.

A simpler way to put it is:

Animation: How to animate – duration, speed, etc.
Keyframes: The properties to animate – From/To.

The following animation property is shorthand for the various CSS properties which will be covered later in this section.

#element { animation: name duration timing-function delay iteration-count direction; }
@keyframes name {
     0% { property: value1; }    //Start of animation duration
     35% { property: value2; }   //35% through the animation duration
     100% { property: value3; }  //End of animation duration


The name of the animation. This value links the animation properties to the keyframes. This value is required, without this the keyframes can’t be referenced.


The time it takes for the animation to complete in seconds.


Supported timing-function keywords are: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end. The cubic-bezier() CSS function is supported by animation-timing-function and can be used to create custom timing-functions.

If left out, this property defaults to ease.


The amount of time, in seconds, waited before the animation begins after the animation has been applied to the element.

If left out, this property defaults to 0s.


The amount of times the animation should run. Negative values are treated as 1 and fraction values play that fraction of that animation. For example 1.5 will play through the animation 1 time and stop halfway through the second iteration. “infinite” does what you’d imagine, it doesn’t stop the animation.

If left out, this property defaults to 1.


The direction of the animation. This property has 4 values: normal, alternate, reverse, alternate-reverse.

The “normal” state would play through the keyframes from the lowest percentage to the highest. This property can be set to “reverse” where it will play from 100% down to 0%.

“alternate” runs the animation in reverse every second iteration, so the animation goes from 0% to 100% the first time and then from 100% to 0% the second time and repeats that pattern. This is property gives the effect that the animation doesn’t restart.

“reverse” runs the keyframes in reverse, for example it begins at 100% and ends at 0%.

Lastly, “alternate-reverse” begins at 100% and reverses every second iteration.

If left out, this property defaults to ‘normal’.

CSS Keyframes

Along with the animation-name, keyframes are the most important aspects of CSS animations. Keyframes are the animation instructions.

Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The “from” keyword references 0% and the “to” keyword references 100%. Functionally the following is identical:

@keyframes example {
    0% { bottom: -90px; right: -40px; }
    100% { bottom: -90px; right: -40px; }
@keyframes example {
    from { bottom: -90px; right: -40px; }
    to { bottom: -90px; right: -40px; }

Quick demonstration based on the previously covered properties,html,css

In the above example I’ve made use of:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-iteration-count

The 4 “ball” keyframes are telling the element to animate through each of the 4 keyframes within 6 seconds, while making use of a the boring ‘ol linear timing-function and to do this indefinitely.

As you can see, the keyframes syntax is similar to the media query syntax (And SCSS!) – which most people have been exposed to. Hopefully that makes you feel more at home!

That’s really all there is to it. Let’s go over a more detailed tutorial to make this even more digestible.

Simple tutorial

First we have to come up with a cool animation idea. I’m a big fan of Paul Irish (and you should be too) so I’m going to do some sort of animation involving him.

I’ve taken this image and cut out the arm quite badly, so I have two images. The plan is to layer the arm on top of the larger image and animate it.
First we need to define the html



Next, the CSS

#paul {
   background: url(../img/paul-bg.jpg) no-repeat left top;
   height: 450px;
   margin: 0 auto;
   overflow: hidden;
   width: 600px;
   position: relative;
#paul .arm {
   animation: pumping-iron 2s ease-out alternate infinite;
   position: absolute;
   right: -40px;
   bottom: -90px;
@keyframes pumpingIron {
    0% { bottom: -90px; right: -40px; transform: rotate(20deg); }
    100% { bottom: -20px; right: 70px; transform: rotate(-20deg); }

So a recap of the above CSS:

  1. Set the basic properties to #paul
  2. Absolutely position .arm and set the animation property with the relevant values. I’ve named the animation “pumping-iron”, set the animation-duration to 3s, used the boring-old linear timing-function and set the loop to infinite because Paul never gets tired of pumping-iron.
  3. Keyframe #1 sets the starting position of Paul’s arm and keyframe #2 sets the end position. The animation-direction value “alternate” tells the animation that once it has completed, it should alternate the keyframes. This brings the animation back to the starting position. The animation-iteration-count value “infinite” tells the animation to continue forever.

You would really feel the vendor-prefixes on this one. A prefix on the @keyframes means you duplicate that entire keyframe section 5 times! Looking at the prefixed version of animation and @keyframes is definitely intimidating, but as long as you realize it’s just CSS bloat you should be fine. Let’s take a look at this for visual reference… Be prepared:

#paul .arm {
    -webkit-animation: pumping-iron 2s ease-out alternate infinite;
    -moz-animation: pumping-iron 2s ease-out alternate infinite;
    -ms-animation: pumping-iron 2s ease-out alternate infinite;
    -o-animation: pumping-iron 2s ease-out alternate infinite;
    animation: pumping-iron 2s ease-out alternate infinite;
@-webkit-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -webkit-transform: rotate(20deg); }
    to { bottom: -20px; right: 70px; -webkit-transform: rotate(-20deg); }
@-moz-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
@-ms-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
@-o-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
@keyframes pumping-iron {
    from { bottom: -90px; right: -40px; transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; transform: rotate(20deg); }

And now for the final product!,html,css/

Cross Browser compatibility

To quote HTML5Please: “For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.”
Currently all modern browsers and/including IE10 support CSS animations with a vendor prefix. Next time you come across an animation you need to add, use CSS animations and either fall back to no animation or use Modernizr to detect for the support and fall back to the javascript you would have added anyway. Viva la progressive enhancement.

…And because Modernizr is so damn cool and simple to use I’ll briefly explain how exactly to make use of this feature detection and fallback option.,html,css/

Modernizr adds various classes to the HTML element depending on whether the browser supports a feature or not. You could make use of classes such as .boxshadow, .no-boxshadow, .borderradius, .no-borderradius, etc. This puts the power of feature detection right into the CSS which is great and easy to make use of. You could also do more intricate feature detection by using their Modernizr javascript object.


I think you should all be using CSS animations right now, provided you include the vendor-prefixed versions and have a decent fallback for non-modern browsers.


From here

And the MDN’s animation example 

Another step by step guide for keyframe css animation