I'm trying to translate an element on my webpage to the top of the page. I can get it to move x amount of pixels up, but with different screen sizes, that won't scale correctly, hence, I am looking for a more relative solution.
What I have so far is:
body {
-webkit-animation-name: raiseBody;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.7s;
}
#keyframes raiseBody {
0% {
-webkit-transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(0px, -300px);
}
but like I said before, this doesn't work on phones and such because it doesn't scale correctly. I've been stuck on this for a few hours so any and all help is appreciated!
Related
I'm practicing CSS animations by making a loading spinner. It's just 4 boxes moving in and out of view. I have it working as intended in VS Code when I just run the .html file. However, when I tried it in an actual angular project with a large data pull, the animation will mess up mid way through.
Posted below is the "blue box", which grows to the right, scaleY toward the bottom, and scaleX toward the left. All the boxes do this same thing, just in different directions with different delays, so there are a total of 16 keyframes in the file. The first loop is usually fine, however, on the second or third, the transform origin of this blue box and another gray box will switch, so the blue box will grow to the left, and the gray box to the right (when it's supposed to be going left). And then the transform origin of the scaleX and scaleY will randomly switch as well (this happens on Firefox, on Chrome or Edge, the animation will just freeze).
I don't get it, is it too much processing power when combined with the data pull?
.boxes .blue-box {
width: $box-width;
height: $box-height;
position: absolute;
background: blue;
left: $blue-left;
top: $blue-top;
transform: scaleX(0) translateZ(0);
opacity: 0;
transform-origin: left;
animation: moveBlue $animation-length infinite;
border: 3px solid rgb(0, 0, 180);
}
#keyframes moveBlue {
13% {
transform: scaleX(1);
opacity: 1;
animation-timing-function: ease-out;
transform-origin: left;
}
51% {
transform: scaleX(1) scaleY(1);
transform-origin: bottom;
}
63% {
transform: scaleX(1) scaleY(0.1);
transform-origin: bottom right;
opacity: 1;
}
75% {
transform: scaleX(0) scaleY(0.1);
transform-origin: bottom right;
animation-timing-function: ease-out;
opacity: 0;
}
}
You should be careful when to display the loader and when to remove it. I have added an example below. call the loader when you are getting results from the api and before you display the results, make suer you clear the loader. In so doing, the loader will not be affected midway data pull.
I want elements to appear one by one on the page with an animation. I created the animation but I don’t know how to hide (not display: none) the element while delay function is in use.
So, after 1 second, element appears with appear animation, however there must be something else to hide it before animation starts.
.insta {
animation: appear 0.4s linear 1s;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class=«insta»>Instagram</p>
Set opacity: 0. That hides your text. Using animation-fill-mode: forwards will let you have the properties added at the end of the animation.
You can solve it by adding an animation-fill-mode: both; to your CSS. That means that the browser will apply the animation's first frame until it starts, and its last frame after it has finished.
Since your animation starts with opacity: 0; and ends with opacity: 1;, no further modifications required.
You can also combine it into the animation property (just add a both keyword somewhere):
.insta {
animation: appear 0.4s linear 1s both;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class="insta">Instagram</p>
Try on CodePen (at least until the Stack Snippets server is down...)
I am trying to animate an element's transform property, but I noticed it's not working as I expect on IE (surprisingly).
when animating from
0% { transform: translateX(-50%) translateY(150px); }
to
100% { transform: translateX(-50%); }
It seems to ignore the translateX(-50%);
This is the way I use the animation on the html element (I use forwards so the final state of the animation is the one that remains applied to the element):
animation: myanimation 1s ease-out forwards;
I've being trying to solve this for a while, even trying from translate(-50%, 150px) to translate(-50%, 0px) but still it won't work.
Here's a working fiddle to quickly see the difference. It works well on Chrome, but misbehaves on IE.
use transform: translate(X, Y) it works on IE ( use vendor prefix for IE9 -ms-transform )
#keyframes myanimation {
0% { transform: translate(50%, 150px); } /* i suppose -50% is a typo, if it's not replace it with -50% */
100% { transform: translate(-50%, 0); }
}
#anim {
display: inline-block;
animation: myanimation 1s ease-out forwards;
}
<h1 id="anim">Hello World</h1>
You want to animate X from -50% to -50%? If you want to animate the Y coordinate, then set the value on your target percent.
100% { transform: translateX(-50%) translateY(0); }
why not? This works on IE. I've tested.
I was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).