How to Use CSS transitions

Question

Hi friends is anybody knows how to use Css cubic-bezier in the Html Page

I have tried ease-in effect here
it is not working. Help me to give ease-in effect to the div when the page-load.
Here is my css Code:

.container{width:100%;}
.Innerdiv{width:50%;-webkit-transition: all 1s cubic-bezier(.42, 0, 1, 1); 
-moz-transition: all 1s cubic-bezier(.42, 0, 1, 1); padding:30px;}

Html is here

<div class="container">
        <div class="Innerdiv">
            <h1>
                What is Lorem Ipsum?
            </h1>
            <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
            </p>
        </div>
</div>

Like so: jsfiddle.net/YvR3L Transition is to enable animation. But you need to change it somehow to animate.. Like I did with :hover — Ron van der Heijden
– Ron van der Heijden, Commented Jun 4, 2013 at 11:14

James Holderness · Accepted Answer · 2013-06-04 11:57:37Z

1

If you want the transition to happen on load, I suspect you'll need to use animations rather than transitions. For example, if you want the inner div to shrink from 100% to 50% while the padding expands from 0 to 30px, you could use css like this:

.container{
  width:100%;
}
.Innerdiv {
  animation:shrinkInner 1s;
  width:50%;
  padding:30px;
}

@keyframes shrinkInner {
  0% {
    width:100%;
    padding:0px;
  }
  100% {
    width:50%;
    padding:30px;
  }
}

This is just the standard CSS without prefixes - to support webkit you'll need to add webkit prefixes where necessary.

Fiddle example with prefixes included

edited Jun 4, 2013 at 11:57

answered Jun 4, 2013 at 11:51

James Holderness

23.1k2 gold badges43 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Selvamani · Accepted Answer · 2013-06-04 11:21:07Z

1

Here the simple example

div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

Initially you mention the transition to specific class or id, then you can set the transition when you want like :hover :active what ever you want

The transition property is a shorthand property for the four transition properties:

transition-propert
transition-duration
transition-timing-function
transition-delay

For more information visit Here

Here I update Your code: DEMO

edited Jun 4, 2013 at 11:21

answered Jun 4, 2013 at 11:15

Selvamani

7,7144 gold badges34 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to Use CSS transitions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related