CODEWITHSUNDEEP
htmlcsscss-transitions
Suresh Pattu
Suresh Pattu

Reputation: 6209

How to Use CSS transitions

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>

Upvotes: 0

Views: 200

Answers (2)

James Holderness
James Holderness

Reputation: 23001

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

Upvotes: 1

Selvamani
Selvamani

Reputation: 7684

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:

  1. transition-propert
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

For more information visit Here

Here I update Your code: DEMO

Upvotes: 1

Related Questions