CSS: Customizing Transforms

Question

Is there a way to customize transforms and transitions in CSS? For example, in this Jsfiddle, I'd like to for the first 2 seconds, transform 110 degrees, then for 4 seconds, transform 200 degrees.

http://jsfiddle.net/jzhang172/b5zun436/

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
}

<p>CSS question: IS there a way to customize the transform? (i.e., transform box to 110 deg, duration 2 seconds and then transform box another 180 degrees, duration 5 seconds. </p>
    <div class="box"></div>

Why not use a CSS animation?

www139
– www139

2015-10-03 16:42:58 +00:00
Commented Oct 3, 2015 at 16:42 — www139
– www139, Commented Oct 3, 2015 at 16:42

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-03 16:48:22Z

4

You need to use key-frame animation for this, that's why it is called as key frame animation, where you define it frame by frame.

@keyframes myAnimation {
    0%    { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    33.3% { -webkit-transform: rotate(110deg); transform: rotate(110deg); }
    100%  { -webkit-transform: rotate(200deg); transform: rotate(200deg); }
}

answered Oct 3, 2015 at 16:48

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Praveen Kumar Purushothaman Over a year ago

@Snorlax Hope this helped. Wow, I am surprised you didn't know about this. :)

Praveen Kumar Purushothaman Over a year ago

@ManojKumar No no, no bad words. :P

Collectives™ on Stack Overflow

CSS: Customizing Transforms

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related