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>
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
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);
}
I am trying to implement a grow and shrink effect on DIV element, this is working but the animation is working from left to right. Would like to make it from center.
Below I have placed the code, and here is the fiddle
.elem {
position:absolute;
top : 50px;
background-color:yellow;
left:50px;
height:30px;
width:30px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: grow;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
#-moz-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
How can I do this.
Use transform: scale(n) instead of changing the width/height
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(4.333);
}
}
Demo
You shouldn't need the browser prefixed versions at this point in time.
Keep in mind that scaling an element like an image to 4.3x its full size will make it blurry, so it might be better to make the default (1 / 4.3)x to start, then scale it up to 1 in the animation.
I've got a css #keyframe animation I'm trying to initiate but it never starts... What am I doing wrong?
http://jsfiddle.net/sadmicrowave/VKzXp/
#-webkit-keyframes slideNotificationsHide {
0%{ width:70%; }
100%{ width:94%; left:0; right:0; }
}
#left-container{
position:aboslute;
top:0px; right:30%;
width:70%; height:100%;
border:1px solid green;
background:#eee;
}
#left-container:target{
background:green;
-webkit-animation: slideNotificationsHide .6s ease-in-out linear forwards;
-moz-animation: slideNotificationsHide .6s ease-in-out linear forwards;
animation: slideNotificationsHide .6s ease-in-out linear forwards;
}
<div id='left-container'></div>
click to start animation
Notice the background:green; attribute/property in the #left-container:target declaration. That portion actually works, so I know the :target is working; just not the animation.
You have defined both animation-timing-function: linear; and animation-timing-function: ease-in-out; and you also had a typo in the #left-container{ position:aboslute;}
I've fixed the typo and removed animation-timing-function: linear; - is this how you want it ? Demo
Hope this helps.