I'm trying to scale and translate an absolute positioned div, but after the scale, the div won't move to the exact coordinates I gave it in my keyframe.
I know it's due to the coordinates of the div, which remains the same as when unscaled.
I could just adjust the final coordinates of my keyframe, but is there a smarter way to fix that?
Here's my code (vendor prefixes removed voluntarily), and here's a fiddle.
HTML
<div class="popin willGoToUpperLeft"></div>
CSS
.popin{
width:400px;
height:200px;
position:absolute;
top:300px;
left:200px;
background:url('//placekitten.com/400/200');
}
.willGoToUpperLeft{
animation: scaleOut 1s ease-in-out 0s 1 normal forwards,
goToLeftCorner 1s ease-in-out 1s 1 normal forwards;
}
#keyframes scaleOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.1);
}
}
#keyframes goToLeftCorner {
100% {
top: 0px;
left: 0px;
}
}
Ended up using
transform-origin: 0% 0%;
to keep the original coordinates.
It's a workaround, the effect isn't as awesome as scaled from center, but that will work for now.
If someone has a smart solution to keep scaling from center, I'm interested!
Related
On GIF below, there's parent div, which contain "left-menu" and "app-content". Left menu is animating, using keyframes and translate property
#LeftMenuContainer {
&.menu_hidden {
animation: slide-out 0.6s forwards;
}
&.menu_shown {
animation: slide-in 0.6s forwards;
}
}
#keyframes slide-in {
0% { transform: translateX(-100%); width: 0; }
100% { transform: translateX(0); width: auto; }
}
#keyframes slide-out {
0% { transform: translateX(0); width: auto; }
100% { transform: translateX(-100%); width: 0; }
}
DOM tree looks like this
<div id="contentContainer" class="flex">
<app-left-menu></app-left-menu>
<div>Be smooth!</div>
</div>
Is there any way, to "smooth" transition parent width, when "left-menu" is hiding? I try to add styles for parent, with
transition-property: width;
transition-duration: 0.6s;
but it doesn't work.
https://im2.ezgif.com/tmp/ezgif-2-a1f74da85c.gif
Assume It only flickers when comes to animate, so you can try to use will-change, css-will-change-property
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed
If you are using framework like React can try to use framer-motion
I've used the following CSS taken from here.
:host {
animation: rotation 2s infinite linear;
border: 10px solid yellow;
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
I don't get to see any rotation, although I can see the border, so I know that I target the correct element. I don't think it's required to have an IMG (and mine is a custom thingy in Angular). It works on the IMG and also on a DIV. Not sure how to diagnose it further as rotations/animations aren't my strongest suite.
One approach is to put the custom component in a DIV and rotate that. However, it does rotate around the middle of the screen (wiiiide circle) instead of spinning around itself.
<div id="loading">
<my-icon-globe></my-icon-globe>
</div>
#loading { animation: rotation 2s infinite linear; }
#keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
You can adjust transform-origin of the DIV if you attempt the second approach.
Good day,
I am trying to make a nice animation for a website.
It should be relatively simple. So I have drawn a hand and a BMW car key. Used a css code to make it swing and yes it works.
However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.
I could of course use screen size in css. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.
However when resizing the key moves also anywhere where it would like to be :-/
Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.
My HTML code (of course bootstrap and others are linked in the header)
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
.key_hand {
/*
background-image: url('arm_hand.png');
background-repeat: no-repeat;
background-size: 100%; */
min-height: 900px;
}
.key_hand>.complete_arm {
position: relative;
width: 100%;
z-index: 2;
}
.key_hand>.bmw_key {
position: relative;
display: inline-block;
top: -390pt;
left: 7%;
z-index: 1;
width: 10%;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<div class="container">
<div class="row">
<div class="col-md-12 key_hand">
<img src="arm_hand.png" class="complete_arm" />
<img src="complete_bmw_key.png" class="bmw_key" />
</div>
</div>
</div>
I have created the following pen. Hoping to shed some light on this case.
https://codepen.io/slalex/pen/GXxMmg
Removing min-height: 900px from .key_hand, and replacing pt by % for the top positioning of .key_hand > .bmw_key, it should be great. Here is the result
Hope it look like what you were waiting for, and bravo for your drawing !
I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.
When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.
Here's my element and animation: http://jsfiddle.net/2Lwftq6r/
HTML:
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
CSS:
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
transform: translateX(0);
}
#anim:checked ~ div {
-webkit-animation: dance 2s infinite ease-in-out;
-moz-animation: dance 2s infinite ease-in-out;
}
#-webkit-keyframes dance {
0%, 100% { -webkit-transform: translateX(0); }
50% { -webkit-transform: translateX(300px); }
}
#-moz-keyframes dance {
0%, 100% { -moz-transform: translateX(0); }
50% { -moz-transform: translateX(300px); }
}
I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution:
So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:
#Spatula:hover{
animation-direction:alternate;
transform: translate(1.2cm,1cm);
transition: all 1.5s;
-webkit-transition: all 1.5s;
}
#Spatula{
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
Good luck!
You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):
HTML:
<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>
CSS:
.anim-div {
margin-top: 50px;
width: 50px;
height: 10px;
background: #000;
}
.anim-div_active {
-webkit-animation: moving 2s ease-in-out infinite alternate;
animation: moving 2s ease-in-out infinite alternate;
}
.anim-div_return {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
#-webkit-keyframes moving {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(300px); }
}
#keyframes moving {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
Javascript:
$('#anim-input').on('change', function() {
var $animDiv = $('.anim-div');
if (this.checked) {
$animDiv.removeClass('anim-div_return')
.addClass('anim-div_active');
return;
}
var transformValue = $animDiv.css('webkitTransform') ||
$animDiv.css('transform');
$animDiv.css({'webkitTransform': transformValue,
'transform': transformValue})
.removeClass('anim-div_active');
requestAnimationFrame(function() {
$animDiv.addClass('anim-div_return')
.css({'webkitTransform': 'translateX(0)',
'transform': 'translateX(0)'});
});
});
P.S.
Vendor prefixes are based on actual browsers list from http://caniuse.com.
Check out This StackOverflow question.
You aren't going to like this answer, but reality is that CSS3
animations aren't really useful to achieve this. To make this work you
would need to replicate a lot of your CSS in your Javascript which
kind of destroys the point (Like for example in this closely related
answer
Change speed of animation CSS3?).
To really make it stop smoothly your best bet would be to write the
animation on a platform like the Greensock animation library
which provides all the tools you need to make it actually smoothly
stop instead of suddenly stop.
There's also another answer below it that does make an effort at using CSS, you can look at that one.
There is also an alternate solution, it might not give you the desired effect of going back to it's original state, but since nobody mentioned it and this problem seems to have no solution, it's possible to pause the animation purely in css, locking it's state until it's started again
To pause the animation you need first to make the animation available even when the checkbox is not checked
And make use of the animation-play-state property
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
animation: dance 2s infinite ease-in-out paused;
}
#anim:checked ~ div {
animation-play-state: running;
}
#keyframes dance {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(300px); }
}
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
I'm loading an element that has the initial css values of :
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
transition: all 2s ease-in-out;
transform: scale(0,0);
}
I need to change to scale(1, 1) when the element loads in the page and see the transition. Anyone can help?
transition will apply the moment you load the page so that is not an ideal solution in your situation, what you will need is CSS #keyframes where you need to set scale(0,0) to the class and then scale(1,1) for 100% as keyframes will shoot after the page is completely loaded.
Demo (Refactored the code a bit and added animation-fill-mode to prevent the popup from scaling back to 0 so using rev 2)
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: bummer 2s;
animation: bummer 2s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* Add this so that your modal doesn't
close after the animation completes */
}
#-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1,1);
}
}
#keyframes bummer {
100% {
transform: scale(1,1);
}
}
Here as I explained before, am setting the initial scale of the element to 0,0 and than am animating it to 1,1 using keyframes. The time of the animation can be controlled by tweaking the 2s which is nothing but 2 Seconds.