How do I make my div scale to larger than it's original size using css animation?


Tags: html,css

Problem :

I have a div which needs to start as a square, 70px x 70px and scale to a larger rectangle 140px x 210px For some reason the div won't scale to larger than it's original size. How can i achieve this?

This is my code:

HTML:

   <div id="tab">
   </div>

CSS:

#tab {
-webkit-animation: enlarge 5s forwards;
width: 140px;
height: 210px;
position: absolute;
left: 15px;
top: 0px;
background-color: red;
}

@-webkit-keyframes enlarge{
0% {-webkit-transform: scale(1,1)};
100% {-webkit-transform: scale(2,4)};
}

http://jsfiddle.net/kacmuhuw/1/

EDIT::::: CORRECT FIDDLE:

http://jsfiddle.net/kacmuhuw/6/



Solution :

Your Keyframe syntax is not correct. It should look like this

@-webkit-keyframes enlarge{
    0%  { -webkit-transform: scale(0,0) }
    100% {-webkit-transform: scale(3,4) }
}

Demo: http://jsfiddle.net/kacmuhuw/8/

without the semicolon at the end of the }


With your updated jsFiddle it is even more simple:

@-webkit-keyframes enlarge{
    100% {-webkit-transform: scale(2,4)}
}

New demo: http://jsfiddle.net/kacmuhuw/9/


    CSS Howto..

    How to create a circumference with CSS? [closed]

    How to over-ride img-width from bootstrap? Set css rule to null?

    D3 Line Chart Show/Hide Element, Variable Not Defined Error?

    How to use conditional CSS In CakePHP 2.x?

    How to do valid CSS for li text and li text with image?

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    How do I align my label to the left of my text input box with CSS?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    Double Scroll Bars kept showing in Windows Broswers

    how to position an element on top of another element?

    Fill dynamic
    's with content. But how to show it?

    How to vertical-align to x-height?

    How do I animate a div with css3 to move and spin?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How can I truncate long texts in a table using CSS?

    How to magnify images on hover using purely css? [closed]

    Codeigniter Form Validation - Showing Errors Individually problems

    How do I use a variable inside of a shorthand if/else statement in a PHP for() loop?

    How to add a 3rd level to my CSS drop down menu?

    How do I achieve this animation using javascript/jquery? [closed]

    How do I use CSS transformations to slide a div on screen?

    How to select the parent's parent in CSS?

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How to add a css to a view in the Controler?

    How can I group DIVs in my document so I can apply CSS to them?

    How do I overlay text on an image who's size is to be set?

    How to display icon with text in html with the help of css?

    How to move a div horizontal then vertical using css animation?

    How can my css div with the display flex property be alignd to the right when it's wrapping?