CODEWITHSUNDEEP
cssanimation
Shinji
Shinji

Reputation: 101

CSS transition only works one way and the element will only revert without transition

i'm trying to have my main element to start from a state with transform and when you hover over it will transform with a transition. however, when you unhover it, the element transforms back to it's original state without doing a transition. if i put transition in the main as well then it would transform when the page loads with a transition. i want it to not change in the beginnning. any help would do.

main {
    width:500px;
    height:300px;
    transform:perspective(1500px) rotateX(50deg);
    transition:transform 2s;
}

main:hover {
    transition:transform 2s;
    transform:perspective(0px) rotateX(0deg);
}

Upvotes: 1

Views: 1934

Answers (3)

user9408899
user9408899

Reputation: 4540

Remove transition: transform 2s; from main:hover, and put it inside main.

.main {
  width: 500px;
  height: 300px;
  background: red;
  transition: transform 2s;
  transform: perspective(1500px) rotateX(50deg);
}

.main:hover {
  transform: rotateX(0deg);
}
<div class="main"></div>

Upvotes: 3

Jochem Kuijpers
Jochem Kuijpers

Reputation: 1797

The example you give in the opening post does not exhibit the problem you are referring to of applying the transition animation on page reload.

For example:

.main {
    background: #DDD;
    width: 100px;
    height: 80px;
    transition: transform 2s;
    transform: perspective(1500px) rotateX(50deg);
}

.main:hover {
    transform: rotateX(0deg);
}
<div class="main"></div>

This is essentially identical to your example and shows the desired outcome. So you should double check if there are other transitions that you may misinterpret, or other events that cause the hover style to become active.

In the current state, this question cannot be answered.

Upvotes: 1

prettyInPink
prettyInPink

Reputation: 3444

Including it in the main normal state will fix this:

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    -webkit-transition:-webkit-transform 2s;
    transition:-webkit-transform 2s;
    -o-transition:transform 2s;
    transition:transform 2s;
    transition:transform 2s, -webkit-transform 2s;
    background: red;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
}

View fiddle.

Without transition on initial hover, set it to none for normal state:

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    background: red;

    -webkit-transition:-webkit-transform 2s;

    transition:-webkit-transform 2s;

    -o-transition:transform 2s;

    transition:transform 2s;

    transition:transform 2s, -webkit-transform 2s;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

View fiddle.

Upvotes: 1

Related Questions