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.
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.
I am trying to pause the animation(which is a CSS transformY) state on hover but the hover is not evenly detected accross the transform range(i observed it is properly detected in the initial range and after the transform ends)
This is the code(i simplified it to minimum for posting) :
<html>
<head>
<style>
.member{
height:50px;
width:50px;
margin:30px;
border-radius:50%;
border:1px solid #AAAAAA;
background-color:black;
transition:all 0.3s ease;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6s;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateX(200px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateX(200px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes dropHeader {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.member:hover{
border:3px solid #ffffff;
box-shadow: 0px 0px 0px 3px #7ec0ee;
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="member">
</div>
</body>
</html>
Okay, here is the thing, i couldn't figure out the exact reason but these are all the things i tried and failed and then succeeded (in order) :
1. Removing -webkit
2. using jquery mouseover and mouseout integrated with css animationstates "running" and pause.
3. Then, i observed that after one hover if i click multiple times somewhere else on the webapage and then hover, it worked! Which gave me a hint to the direction of introducing multiple such divs and it totally works fine now.
I have multiple divs with animations, created in CSS, on my page. When the last div with animation is finished animating I wish to have the whole sequence to start over. My animations all have different delay times, and animations. I've tried the "animation: infinite" but what that achieves is the each individual animation will run again immediately after the animation has finshed. I need it start from the beginning after all of the animations have completed.
Anyone know how to achieve this?
Sample CSS
.openDiv {
width: 0px;
height: 513px;
background-image: url("CLS-circle-Ring-faded.png");
animation-name: grow;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
transition-delay: 10s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-webkit-transition-delay: 10s;
}
#-webkit-keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
} /* Standard syntax */#keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
}
Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way?
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: linear;
}
You mean like this:
.spin {
width:100px;
height:100px;
background:red;
}
#-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(2520deg);
}
}
.spin.animated {
-webkit-animation-name: spin;
-webkit-animation-duration: 2800ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
}
<div class="spin animated"></div>
Or even better:
.spin {
width:100px;
height:100px;
background:red;
}
.spin:hover {
transform:rotate(2520deg);
transition: transform 3s ease-out;
}
<div class="spin"></div>
In the to, give another animation:
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
animation: ease;
}
}
#keyframes ease {
}
You might need to tackle the iteration count here. It should happen only after the 7 animations. So, I am not sure about that.
You have it pretty much all the way there.
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: ease; /* your timing function is where you tell it how to animate */
}
here is list of all available calls:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
You can do it with a cubic bezier timing function.
Something like
cubic-bezier(0.81, 0.95, 0.84, 0.95)
will give an effect like the one that you are searching. There is a linear animation most of the time, and then it slows down
You can try different values, and set it graphically, here
bezier curve tester
I have two div elements, within the one background div I have another div which uses CSS animation to display a box going up and down.
I want to make those parts of this div with the box 'disappear' as soon as any part of that box crosses over that background div.
I have an example here JSFidle, where as soon the red box exceeds the black box it should then go 'under' the black div rather than remaining at the top as it's presently.
This is the CSS code:
body{
z-index:100;
}
div{
background: black;
height:300px;
}
#scroll{
width: 200px;
height: 200px;
background: red;
position: relative;
-webkit-animation-name: test;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
animation-name: test;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
#keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
body {
overflow-x: auto;
overflow-y: hidden;
}
What is the best way to create this effect.
You just need to add overflow: hidden to the parent div.
I sped up your animation for testing purposes.
Like so
#scrollParent{
overflow: hidden;
}
Assign a z-index to the outer-most background(the white part in the fiddle) and make it higher than the z-index of the red box. Guess that should work.