I am using a CSS animation to get my logo to slide in from off screen. What i'm looking for is the animation gets started with 3s delay right after the page gets loaded but the logo must be hidden at first and then suddenly it comes down slowly from the top of the page after 3s of loading it with the specified animation. what I have here is that you can see the logo when you load the page at the beginning and then after 3s the animation starts working. no one should see the logo at first. it must get appeared after 3s of loading the page. does anybody know what i'm missing here?
This is my CSS:
#logo-header {
height: 240px;
margin: 0 auto;
animation: var(--logo-header-time) ease-in-out 3s 1 logo-header;
}
body {
font-family: WeHaveSomeFontsHere;
--nav-load-time: 350ms;
--names-header-time: 2s;
--logo-header-time: 1s;
}
#keyframes logo-header {
0% {
transform: translateY(-100%);
display: none;
}
100% {
transform: translateY(0);
}
}
In order to get your logo to be hidden until the animation happens, you need the line of code animation-fill-mode: backwards; in your #logo-header
#logo-header {
height: 240px;
margin: 0 auto;
animation: var(--logo-header-time) ease-in-out 3s 1 logo-header;
animation-fill-mode: backwards;
}
body {
font-family: WeHaveSomeFontsHere;
--nav-load-time: 350ms;
--names-header-time: 2s;
--logo-header-time: 1s;
}
#keyframes logo-header {
0% {
transform: translateY(-100%);
display: none;
}
100% {
transform: translateY(0);
}
}
Related
I have a logo of an iceberg, which I am trying to simulate a floating animation with by increasing and decreasing the top margin. I am using the following css for this:
img {
height: 60px;
padding: 5px;
-webkit-animation: logofloat 1s ease-in-out infinite alternate;
-moz-animation: logofloat 1s ease-in-out infinite alternate;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
margin-top: 0px; margin-top: 5px;
}
to {
margin-top: 5px; margin-top: 10px;
}
}
Here is what that currently looks like: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation is a bit choppy, is there anything that I can do to make it smoother?
Use transform: translateY instead of margin, so the animation will take benefit of the GPU and use will-change: transform so the browser knows in advance what properties are going to change.
img {
height: 100px;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
<img src="https://i.stack.imgur.com/UJ3pb.jpg" />
Finally, vendor prefixes are no longer necessary unless you need to support really old browser versions.
I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?
We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>
You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>
I have a very simple animation that fades out and shrinks a div.
But the problem is that when the animation finishes it goes back to the start and stays there.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards; to your .fade-out rule it will fix your animation.
animation-fill-mode specifies how CSS rules should be applied before and after executing the animation. The default is none which means that before and after the animation is executed, it will not apply any of the animation styles. That's why you're seeing it revert to the pre-animation state.
forwards tells the browser to retain the styles from the last keyframe. That's what you're looking for.
See the MDN docs for more information.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
Use animation-fill-mode property
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
Try using keyframes.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
You need to use animation instead of transition. Transition effects are triggered on certain events, for example a click which adds a class or a hover.
div img {
animation: example 1s ease-in-out forwards;
}
#keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Now you would of course have to add the prefixes for that, webkit, moz, etc.
For basic knowledge about keyframe animation in css3:
http://www.w3schools.com/css/css3_animations.asp
I would like to spin my div when I hover on it and as it spin I want to make it bigger like zoom in.
So far I have this:
[html]
div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>
[css]
.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}
.myMsg:hover {
opacity: 1;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}
so I want it to spin before scaling to regular size
Any help is appreciated
First, to show that it can be done.
Now that that's out of the way, let's get down to the nitty gritty and show you how to do it.
First, you'll want to use animation to animate the properties and get the rotation effect. Sadly, a transition won't be enough since transitioning between 0 and 360 means you aren't going anywhere. So, animate your properties from one to the other on the hover. Your code will end up looking something like this:
#keyframes spin {
from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
animation: spin 1s forwards;
}
The #keyframes defines the animation that will happen, and you want to transform from one set of properties to the final one. Then, you set your :hover to play that animation. The relevant properties for the animation are animation-name, animation-duration, and animation-fill-mode (which say that it should have the same properties as the last frame when it is done animating. Webkit requires prefixes, so you'll want to put those in too.
In addition to this, I also placed a transition: transform 1s; on the .myMsg class so that it would animate back after the mouse moves away. But do note that Webkit doesn't seem to play nice with the interaction between the two, so it is a bit choppy and less than ideal. But, with experimental properties like this, sometimes you get what you get.
Some side notes:
Your CSS isn't cross browser compatible, you should clean it up a bit
You're defining 1 transform property, and then immediately overriding it. All transforms need to go in the same declaration. They can't be combined like that
Define an infinite css animation with keyframes for spinning and switch to it on the hover. Use transition for the size (height/width) properties and change them on hover in css also.
Example: http://jsfiddle.net/6guCd/
div {
margin: 100px;
width: 100px;
height: 100px;
background: #f00;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
div:hover {
margin: 50px;
width: 200px;
height: 200px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}