I have a div animation below which translate from bottom to top repeatedly.
0px to -20px to 0px to -20px to 0px.... but I want it to translate like this
0px to -20px to 5px to -20px to 0px to -20px to 5px to -20px to 0px
The demo is here.
HTML
<div id="main">
<div id="example"></div>
</div>
CSS
#main{
border-bottom: 1px solid black;
}
#example{
width: 100px;
height: 100px;
border: 1px solid black;
-webkit-animation: example 0.5s linear 0s infinite alternate;
}
#-webkit-keyframes example {
from {transform:translate(0px,0px);}
to {transform:translate(0px,-20px);}
}
first of all change the syntax of the animation from to and from to percentage based I.E.
from ::
#-webkit-keyframes example {
to {transform:translate(0px,0px);}
from {transform:translate(0px,-20px);}
}
to ::
#-webkit-keyframes example {
0% {transform:translate(0px,0px);}
50% {transform:translate(0px,-20px);}
100% {transform:translate(0px,5px);}
}
now see with percentages , you can animate an element at any point , DEMO here
use percertanges instead of from and to.
DEMO
#-webkit-keyframes example {
0% {transform:translate(0px,-20px);}
25% {transform:translate(5px,-20px);}
50% {transform:translate(0px,-20px);}
75% {transform:translate(5px,-20px);}
100% {transform:translate(0px,0px);}
}
I don't if this is the desired effect. Just update accordingly.
Related
First, I want to apologize for the lack of knowledge on this matter.
I'm trying to add an animation to the login icon to catch the eye of users signing up. But I can't write the code correctly for the animation to work. And most of all, I would like this animation to run when users are logged-out.
That's what i've tried in style.css, but maybe everything is incorrect. I will ask for correct coding.
.menu-item i._mi .dashicons .dashicons-download {
animation-name: dashicons-download;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes dashicons-download {
0% {
box-shadow: 0px 0px 3px grey;
}
50% {
box-shadow: 0px 0px 10px grey;
}
100% {
box-shadow: 0px 0px 3px grey;
}
}
Image sample of my site.
Actually, your code works. I've just replaced the selector (see the snippet).
So, I would check selector .menu-item i._mi .dashicons .dashicons-download once again.
.animated-elem {
width: 30px;
height: 30px;
background: #ccc;
}
.animated-elem {
animation-name: dashicons-download;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes dashicons-download {
0% {
box-shadow: 0px 0px 3px grey;
}
50% {
box-shadow: 0px 0px 10px grey;
}
100% {
box-shadow: 0px 0px 3px grey;
}
}
<div class="content">
<div class="animated-elem"></div>
</div>
If you want run this animation only user logouted site follow this methods.
Methods:
First change element 's animation-name property
Second Add animatedly class to element.
First method
const login_body = document.querySelector('.login__body');
const status = document.querySelector('.status');
function logout(){
login_body.style.animationName = "logout";
login_body.textContent = "You are Logout.";
status.textContent = "Logout successfully complete(animation-name changed.)";
}
setTimeout(logout, 5000);
.login__body{
background: blue;
display: inline-block;
padding: 20px;
color: white;
animation-name: ;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes logout {
0% {
box-shadow: 0px 0px 3px red;
}
50% {
box-shadow: 0px 0px 10px red;
}
100% {
box-shadow: 0px 0px 3px red;
}
}
<div class="login__body">
You are logged
</div>
<hr>
<p class="status">
You are automatically logout to site 5 seconds left.
</p>
Second method
const login_body = document.querySelector('.login__body');
const status = document.querySelector('.status');
function add_logout_class(){
login_body.classList.add("logout")
status.textContent = ".logout class successfully added to .login__body class.";
login_body.textContent = "Login";
}
setTimeout(add_logout_class, 5000);
.logout{
background: blue;
display: inline-block;
padding: 20px;
color: white;
animation-name: logout;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes logout {
0% {
box-shadow: 0px 0px 3px red;
transform: rotateZ(3deg);
}
50% {
box-shadow: 0px 0px 10px red;
transform: rotateZ(-3deg);
}
100% {
box-shadow: 0px 0px 3px red;
transform: rotateZ(3deg);
}
}
<div class="login__body">
Wait. . .
</div>
<hr>
<p class="status">
.logut class automatically adding 5 seconds left.
</p>
These methods are based on my experience, there may be better solutions. Good Luck.
My CSS and a snippet for demonstration:
/*compatibility*/
#-moz-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-webkit-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-ms-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
#-o-keyframes rainbow {
from {background-position: -100vh 0}
to {background-position: 100vh 0}
}
.rainbow {
padding:0 0 3px 0 !important;
border-bottom: 1px solid transparent;
border-radius: 10px;
/*added a colourstop here, without the third colourstop you get a hard edge*/
background: linear-gradient(#181717, #181717),
linear-gradient(60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-origin: border-box;
background-clip: content-box, border-box;
animation-name: rainbow;
animation-duration: 4s;
/*set animation to continue forever, and to move at a single rate instead of easing*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
https://codepen.io/jhendrix13/pen/zYrMZQz
Is there a way to further increase the gradient/blend between the colors?
I'm trying to get it similar to this snippet, which has a much smoother blend/transition between colors:
https://codepen.io/mike-schultz/pen/NgQvGO
But my knowledge of CSS is minimal, and I'm not sure how to get that result. I think it has something to do with the animation definition itself, but when I try to take the animation definition from the second snippet and put it in the first snippet the animation stops working and goes static.
If you use ::after you can achieve a better effect:
.box {
margin: 20px;
}
.text {
color: white;
padding: 10px 0;
text-align: center;
}
#-webkit-keyframes rainbow {
0% {
background-position: 500% 0%;
}
100% {
background-position: 0% 0%;
}
}
.rainbow {
border-radius: 6px;
background: #000;
}
.rainbow::after {
content: "";
display: block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 5px;
width: 100%;
background: linear-gradient( 60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400);
background-size: 500% 500%;
animation-name: rainbow;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="box rainbow">
<div class="text">
This is a box with a rainbow border.
</div>
</div>
Set it to display block so the width can be set to 100%, move most of the CSS you had in .rainbow over and set the background-size property, then use percent in the keyframes to loop round to the start (use 200% for this, if you use 100% it won't animate).
EDIT
I've just realised this didn't exactly answer your original question. For blending the colors more smoothly, you can increase the background-size of the element and background-position of the animation, then increase the duration, just tweak until it looks right.
I've edited my snippet to show an example.
I need to change the background color of my page in a loop. So I have something like this:
.bg-changer {
animation: bg-img-slider 10s linear infinite;
transition: background 300ms ease-in 200ms;
body {
margin: 15px auto;
height: 95vh;
width: 90%;
border: 1px solid silver;
}
.bg-changer {
animation: bg-img-slider 10s linear infinite;
/*transition: background 300ms ease-in 200ms;*/
transition-timing-function: ease-in-out;
transition-duration: 1s;
}
#keyframes bg-img-slider {
0%, 100% {
background-image: radial-gradient(silver, snow);
}
20% {
background-image: radial-gradient(#2b5876, #4e4376);
}
40% {
background-image: radial-gradient(#44A08D, #093637);
}
60% {
background-image: radial-gradient(#DD5E89, #F7BB97);
}
80% {
background-image: radial-gradient(#348F50, #56B4D3);
}
90% {
background-image: radial-gradient(#bdc3c7, #2c3e50);
}
}
.page-header {
padding: 10px 0 5px 15px;
}
.page-header>h1 {
padding-bottom: 5px;
border-bottom: 1px solid gray;
}
.page-header>p {
font-size: 85%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BG</title>
</head>
<body class="bg-changer">
<div class="main-content ">
<div class="page-header">
<h1>Page Title</h1>
<p>This is the tag line</p>
</div>
</div>
</body>
</html>
}
#keyframes bg-img-slider {
0%,
100% {
background-image: radial-gradient(silver, snow);
}
20% {
background-image: radial-gradient(#2b5876, #4e4376);
/*animation-timing-function: ease-in;*/
}
40% {
background-image: radial-gradient(#44A08D, #093637);
}
60% {
background-image: radial-gradient(#DD5E89, #F7BB97);
/*animation-timing-function: ease-in;*/
}
80% {
background-image: radial-gradient(#348F50, #56B4D3);
}
90% {
background-image: radial-gradient(#bdc3c7, #2c3e50);
/*animation-timing-function: ease-in;*/
}
}
I apply the class bg-changer to the body tag. It works but the color change happens like a slap. I tried several things to make it smoother. I tried the transition, animation-timing-fuction and a few others (also placed them in the keyframes). Nothing seems to work!
Please educate me with the following questions I have:
First, obviously, how do I change body background color smoothly rather than instantly (on every keyframe %).
Why does background-color not work? I had to use background-image. What is the correct way to use - background, background-color, background-image?
Thanks in advance.
A gradient is not animatable. (The only exception being the position).
A background-color is animatable, but is limited to a solid color.
div {
width: 200px;
height: 100px;
animation: colors 10s infinite;
}
#keyframes colors {
from {background-color: blue;}
to {background-color: green;}
}
<div></div>
If you want to animate a radial gradient, you can do it somehow with a trick, using a transparency
div {
width: 200px;
height: 100px;
animation: colors 2s infinite;
background-image: radial-gradient(circle, transparent, red);
}
#keyframes colors {
from {background-color: blue;}
to {background-color: green;}
}
<div></div>
But you are limited to animating the inner part, of the outer part
A more elaborate example would be to use a pseudo element, and animate the shadow
div {
width: 200px;
height: 200px;
position: relative;
border: solid 1px red;
overflow: hidden;
}
div:after {
content: "";
width: 300px;
height: 300px;
top: -50px;
left: -50px;
position: absolute;
border-radius: 50%;
animation: colors 3s infinite;
}
#keyframes colors {
from {background-color: green;
box-shadow: inset 0px 0px 80px 80px yellow;
}
to {background-color: blue;
box-shadow: inset 0px 0px 80px 100px red;
}
}
<div></div>
Well, the result isn't good looking, but you get the idea.
I think you are using background properly, but for a smooth transition, use something like animations.
For example: use animation in transitions like animation_in, animation_out etc.Also, try transition timing function like
{
transition-timing-function: ease-in-out;
}
for more http://www.the-art-of-web.com/css/timing-function/.
I am trying to color a progress bar depending on the value.
progress[value]::-webkit-progress-value {
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
Looks like attr(value) doesn't appear to work - is there a way to inject value in there? Using chrome
If you use pseudo element before to display your progress?
Maybe this could work?
progress[value]::-webkit-progress-value {
&:before{
content: [attr-data];
display: block;
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
}
I have a 11 frame png spritesheet. When you hover it will play the animation until the last frame and then pause, and when you hover out it will reverse the animation back to the first frame. I have this so far:
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
}
#-webkit-keyframes in {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -2057px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
JS Fiddle: http://jsfiddle.net/os2jm4h5/
Can someone help me out? I would like to do this with CSS (no JavaScript please) and preferably should use only one div.
This is possible with a few changes to CSS:
Add background-position: 0px -1683px; to .intern:hover. This will ensure that the animation "pauses" on the final frame. Currently when the hover animation finishes background-position goes back to 0px 0px;.
Reverse background-position in from and to for #-webkit-keyframes in
Reverse background-position in 0% and 100% for#-webkit-keyframes out
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
background-position: 0px -1683px;
}
#-webkit-keyframes in {
from {
background-position: 0px -2057px;
}
to {
background-position: 0px 0px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
Note that background-position: 0px -1683px; is used because the last image in the sprite sheet (background-position: 0px -2057px;) is actually a copy of the first frame.