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
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.
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>
Case study: A set of <div> elements, with a :hover selector that enables a wobbling animation. But the wobble itself is jarring to just switch on and off. I want to transition into the animation.
This snippet is still jarring. The animation starts the boxes at -10 degrees because that's the most lightweight way to get a smooth wobble from left to right and back again.
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 3s;
}
div:hover{
background-color:red;
animation: wobble 30s infinite;
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<div></div>
Even for faster animations I would like to be able to attenuate the non-linear action based on user interaction. Is it not possible with pure CSS? I was unsuccessful in finding other people talking about this sort of thing.
Two more examples... instead of behavior like this:
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 3s;
}
div:hover{
background-color:red;
animation: wobble 0.2s infinite;
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<div></div>
I'd like to transition the movement to look like this (without so much code)
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 2s;
}
div:hover{
background-color:red;
animation-name: wobble-up, wobble;
animation-duration: 1.2s, 0.2s;
animation-delay: 0s, 1.2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1, infinite;
}
#keyframes wobble-up{
000.0%{ transform:rotate( 0deg); }
008.3%{ transform:rotate( 1deg); }
016.7%{ transform:rotate(-2deg); }
025.0%{ transform:rotate( 3deg); }
033.3%{ transform:rotate(-4deg); }
041.6%{ transform:rotate( 5deg); }
050.0%{ transform:rotate(-6deg); }
058.3%{ transform:rotate( 7deg); }
066.7%{ transform:rotate(-8deg); }
075.0%{ transform:rotate( 9deg); }
083.3%{ transform:rotate(-10deg); }
091.7%{ transform:rotate( 11deg); }
100.0%{ transform:rotate(-12deg); }
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<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>
this is not right way to do i know that and it's not working anymore it's only done for understand my problem.
div
{
transform: rotate(0deg) translate(0);
transition:rotate 0.2s linear, translate 0.3s linear 0.2s;
}
div:hover
{
transform: rotate(60deg) translate(40);
}
As per css3 standards its not possible to achieve the same which you have mentioned. Instead you can make something like this.
<div class="outer">
<div class="inner">
</div>
</div>
.outer
{
height:30px;
width:30px;
transform:translateX(0);
transition:transform 2s linear;
}
.inner{
width: inherit; height: inherit;
transform: rotate(0deg);
transition:transform 2s linear;
background:blue
}
.outer:hover
{
transform: translateX(140px);
}
.outer:hover .inner
{
transform: rotate(160deg);
}