Why does my transform animation override my original transform?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:
.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>But this transform overrides scale.
I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?
http://jsfiddle.net/422t2/
css css3 css-animations css-transforms
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
add a comment |
I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:
.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>But this transform overrides scale.
I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?
http://jsfiddle.net/422t2/
css css3 css-animations css-transforms
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
add a comment |
I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:
.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>But this transform overrides scale.
I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?
http://jsfiddle.net/422t2/
css css3 css-animations css-transforms
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:
.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>But this transform overrides scale.
I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?
http://jsfiddle.net/422t2/
.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>.one{
-webkit-transform: scale(0.5);
}
.two{
-webkit-transform: scale(0.8);
}
.three{
-webkit-transform: scale(0.2);
}
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>css css3 css-animations css-transforms
css css3 css-animations css-transforms
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
16.1k105569
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
asked Dec 26 '13 at 11:43
Artem SvirskyiArtem Svirskyi
2,39572541
2,39572541
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
try to add animation to each element and animation to the container:
DEMO
HTML
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}
@-webkit-keyframes scale1{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes scale2{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes scale3{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.2);
}
}
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
add a comment |
This is because you are overriding the original transform with the one in your animation.
You can wrap those three divs with another div and give animation to the wrap div
Working Demo
HTML
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrap {
-webkit-animation: bounce 1000ms infinite alternate;
}
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
add a comment |
You’re thinking about the transform property wrong. Each element has one transform property and you reset it with your per-element animations. You need to write an animation like this:
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>This preserves the scale component of your transform while allowing the browser to animate the translation. And in your case, you’d write a new animation for each class, and could drop the original scale declaration in favour of animation-fill: both
The other answers here add the animation to a wrapper div, which is a good solution, and if you mess with the transform-origin properties of all your elements and wrapper you should get a lot of flexibility. With a wrapper it’s easier to handle changing compound transformations, even a wrapper round each element can work out elegantly in some cases.
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20784256%2fwhy-does-my-transform-animation-override-my-original-transform%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
try to add animation to each element and animation to the container:
DEMO
HTML
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}
@-webkit-keyframes scale1{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes scale2{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes scale3{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.2);
}
}
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
add a comment |
try to add animation to each element and animation to the container:
DEMO
HTML
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}
@-webkit-keyframes scale1{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes scale2{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes scale3{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.2);
}
}
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
add a comment |
try to add animation to each element and animation to the container:
DEMO
HTML
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}
@-webkit-keyframes scale1{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes scale2{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes scale3{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.2);
}
}
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
try to add animation to each element and animation to the container:
DEMO
HTML
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
@-webkit-keyframes bounce{
from{
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(100px, 100px, 0);
}
}
@-webkit-keyframes scale1{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes scale2{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes scale3{
from{
-webkit-transform: scale(1);
}
to{
-webkit-transform: scale(0.2);
}
}
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
answered Dec 26 '13 at 12:19
Mohsen SafariMohsen Safari
4,95633253
4,95633253
add a comment |
add a comment |
This is because you are overriding the original transform with the one in your animation.
You can wrap those three divs with another div and give animation to the wrap div
Working Demo
HTML
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrap {
-webkit-animation: bounce 1000ms infinite alternate;
}
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
add a comment |
This is because you are overriding the original transform with the one in your animation.
You can wrap those three divs with another div and give animation to the wrap div
Working Demo
HTML
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrap {
-webkit-animation: bounce 1000ms infinite alternate;
}
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
add a comment |
This is because you are overriding the original transform with the one in your animation.
You can wrap those three divs with another div and give animation to the wrap div
Working Demo
HTML
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrap {
-webkit-animation: bounce 1000ms infinite alternate;
}
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
This is because you are overriding the original transform with the one in your animation.
You can wrap those three divs with another div and give animation to the wrap div
Working Demo
HTML
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrap {
-webkit-animation: bounce 1000ms infinite alternate;
}
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
edited Sep 22 '17 at 13:24
TylerH
16.1k105569
16.1k105569
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
answered Dec 26 '13 at 12:09
Surjith S MSurjith S M
5,77421944
5,77421944
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
add a comment |
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
This doesn't animate each element, it animates the wrapper as a whole
– mpd
Jan 29 '18 at 1:40
add a comment |
You’re thinking about the transform property wrong. Each element has one transform property and you reset it with your per-element animations. You need to write an animation like this:
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>This preserves the scale component of your transform while allowing the browser to animate the translation. And in your case, you’d write a new animation for each class, and could drop the original scale declaration in favour of animation-fill: both
The other answers here add the animation to a wrapper div, which is a good solution, and if you mess with the transform-origin properties of all your elements and wrapper you should get a lot of flexibility. With a wrapper it’s easier to handle changing compound transformations, even a wrapper round each element can work out elegantly in some cases.
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
add a comment |
You’re thinking about the transform property wrong. Each element has one transform property and you reset it with your per-element animations. You need to write an animation like this:
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>This preserves the scale component of your transform while allowing the browser to animate the translation. And in your case, you’d write a new animation for each class, and could drop the original scale declaration in favour of animation-fill: both
The other answers here add the animation to a wrapper div, which is a good solution, and if you mess with the transform-origin properties of all your elements and wrapper you should get a lot of flexibility. With a wrapper it’s easier to handle changing compound transformations, even a wrapper round each element can work out elegantly in some cases.
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
add a comment |
You’re thinking about the transform property wrong. Each element has one transform property and you reset it with your per-element animations. You need to write an animation like this:
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>This preserves the scale component of your transform while allowing the browser to animate the translation. And in your case, you’d write a new animation for each class, and could drop the original scale declaration in favour of animation-fill: both
The other answers here add the animation to a wrapper div, which is a good solution, and if you mess with the transform-origin properties of all your elements and wrapper you should get a lot of flexibility. With a wrapper it’s easier to handle changing compound transformations, even a wrapper round each element can work out elegantly in some cases.
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
You’re thinking about the transform property wrong. Each element has one transform property and you reset it with your per-element animations. You need to write an animation like this:
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>This preserves the scale component of your transform while allowing the browser to animate the translation. And in your case, you’d write a new animation for each class, and could drop the original scale declaration in favour of animation-fill: both
The other answers here add the animation to a wrapper div, which is a good solution, and if you mess with the transform-origin properties of all your elements and wrapper you should get a lot of flexibility. With a wrapper it’s easier to handle changing compound transformations, even a wrapper round each element can work out elegantly in some cases.
.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>.one{
transform: scale(0.5);
animation: bounce 1s ease 1s infinite alternate;
}
.two{
transform: scale(0.5)
}
@keyframes bounce{
from{
transform: scale(0.5) translate3d(0, 0, 0);
}
to{
transform: scale(0.5) translate3d(100px, 100px, 0);
}
}<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
edited Nov 29 '18 at 1:14
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
answered Nov 29 '18 at 1:04
Olivier ButlerOlivier Butler
8816
8816
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20784256%2fwhy-does-my-transform-animation-override-my-original-transform%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
