How to Set Two Transition Durations for Multiple CSS Transforms


Tags: css,css3,css-transitions,css-animations,css-transforms

Problem :

I would like the transform: translateY() transition and the transform: scale() transition to have a duration of 1.5 seconds and 0.5 seconds respectively. I can't seem to find a way to do this after multiple attempts and searches. Any help is appreciated. Thank you!

//..CSS..//

.circle1 {
        z-index: 1056;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #BBBBBB;
        position: fixed;
        top: 150px; 
        margin: 0 auto;
        left: 0;
        right: 0;
        color: white;
        text-align: center;
        font-family: Raleway-Light;
        text-decoration: none;
        list-style-type: none;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
       -webkit-transition:  1.5s ease-in-out;
        transition: 1.5s ease-in-out;
        transform: translateY(2000px);
        cursor: pointer;
}

.circle1.open {
        transform: translateY(0px);
}

.circle1:hover {
        transform: scale(1.2);
}


Solution :

You can set different transition on different property of a element. Here, you've only one property, you can try to use animation instead of transition.

Example

.mydiv{
  background-color:#ddd;
  width:80px;
  height:80px;
  transform:scale(1);
 }

.mydiv:hover{
  animation:transformanim 1.5s ease-out forwards;
}

@keyframes transformanim{
  0%{
    transform:scale(1) translateX(0px);
  }
   33%{
     transform:scale(1.33) translateX(20px); /*0.5s*/
  }
  100%{
    transform:scale(2) translateX(20px);; /*1.5s here*/
  }
}
<div class="mydiv"></div>


    CSS Howto..

    How to align text vertically equal top CSS

    How to make colspan work without affecting width of the other rows

    how to remove the css given and get only the data from database using php

    How to remove dropdown active color in bootstrap 3.0?

    How to create a header that changes as you scroll down the page? [duplicate]

    how to remove a TR which have a TD that contain specific text

    How to overwrite css style in a specific page?

    css - how to stretch a background image across the entire window

    How to structure css using BEM methodology for adaptive web pages?

    How to change CSS with jQuery change and this

    How to ignore parent css style

    HTML/CSS buttons don't show in IE properly

    How to select the second paragraph after another with css?

    How to properly align something that resizes in a specific location

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    How to resize a div on drag? [Issue with rotation]

    How to disable inline CSS position attribute

    CSS hide/show effect works on Firefox but not on Chrome/Safari

    How to get :before selector behind its box?

    How can I scale the space taken by a scaled element

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    how to compute Facebook graph api cover offset_y to pixel?

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    How to make float : left work same as table-cell?

    How to layer elements with CSS position property?

    How to solve CSS dropdown border error?

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    How can I set a html web page adapt to only a tablet size or large screen in css? [closed]

    How to change CSS attribute at all div inside td with class

    How to add border to galleria big image?