The most usually case would be like this:
transition: background-color 0.2s,
transform 1s;
but I want to specify which transform attribute that is controlled by the transition ,like
transition: transform scale 1s,
transform skew 0.5s,
transform rotate 2s;
I tried this, it didn't work.
Use animation instead transition and set time of all(1s+0.5s+2s) and in #keyframes divide it to time you want to set for each transform property
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
animation: move 2.5s;
}
#keyframes move {
0% {
transform: scale(3);
}
35% {
transform: scale(3) skew(180deg);
}
50%{
transform: scale(3) skew(180deg) rotate(70deg);
}
}
<div></div>
Related
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);
}
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>
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.
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.
div{
width:100px;
height: 100px;
background-color: red;
animation: anim 1s forwards;
opacity: 0;
}
#keyframes anim{
0%{transform: scale(1.2);opacity:0;}
100%{transform: scale(1);opacity:1;}
}
div:hover{
transform: scale(1.05);
}
<div></div>
I'm having troubles with some code and transform property.
I have an entrance animation on a div. But my hover animation doesn't work, so it looks like that it doesn't because I already used "transform" inside the animation.
Is there a way to make it work?
You can animate the transform by addingtransition to the div's transform
/* property name | duration | timing function */
transition: transform 1s ease-in;
In your case
#keyframes anim{
0%{transform: scale(1.2);opacity:0;}
100%{transform: scale(1);opacity:1;}
}
div:hover{
transform: scale(1.05);
}
div{
width:100px;
height: 100px;
background-color: red;
animation: anim 1s;
transition: transform 1s;
}
<div>Hello</div>
DEMO
Transition - MDN - DOC
I have two transform operations (rotate and translate) and I want to make transition for translate only (rotate have to be instant).
Some suggestions? I prefer pure css.
Use keyframes to reach your desired effect, in addition to animation-fill-mode to keep the computed styles when the animation is finished.
.object {
width: 50px;
height: 50px;
background-color: #F00;
animation-fill-mode: forwards;
}
.object:hover {
animation: move 1s;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateY(0px) rotate(0deg);
}
1% {
transform: rotate(45deg);
}
100% {
transform: translateY(25px) rotate(45deg);
}
}
<div class="object"></div>
I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
And another is
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity
You can simply define multiple transitions:
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>
I am trying to implement rotation for all the divs inside my website. I need this functionality on mouse hover.
You can use animation
div {
width: 100px;
height: 100px;
background-color: #ddd;
margin-bottom: 10px;
transition: all 1s ease;
}
div:hover {
animation: rotate 1s forwards alternate linear
}
#keyframes rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div></div>
if you would like to make it with transition so you need to add to the main class the following:
transition:all 0.3s;
note: the 0.3s represents the time, you can change it to any number like 0.7s
then you will add the following to the :hover event
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
note: deg is representing how many degrees you want them to rotate, so you can add any number rather than 90deg like 360deg
I have created a jsfiddle for you check that out so, you get the ideas how rotation works.
div{
height:100px;
width:100px;
background-color:#000;
margin:50px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
div:hover{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-0-transform:rotate(45deg);
}
<div>
</div>