Hey guys I have a CSS3 animation which makes a pulsing effect using #keyframes animation .The problem is that the animation starts from 0% to 100% every time and I want to start from 0% to 100% and after 100% to 0% so the pulsing effect to have a continuity.The ball should increase to the full size and after slowly decrese to the initial size and after increase again and decrese and so on.
<html>
<head>
<title>Pulse effect</title>
<style>
/*Border radius 50% to make it round */
#circle{
position: relative;
width: 50px;
height: 50px;
border:2px solid red;
border-radius: 50%;
}
#circle:after{
content: '';
width: 20px;
height: 20px;
display: block;
left:50%;
margin-left: -10px;
top:50%;
margin-top: -10px;
background-color: hsla(41, 97%, 47%,1);
border-radius: 50%;
position: absolute;
/*Use keyframe animation to manipulate the effect */
animation:pulseone 2s infinite;
}
#keyframes pulseone{
/*Use SCALE value from TRANSFORM method to increse/decrese the x,y of the vector */
0% {transform:scale(1,1);
background-color: hsla(41,97%,47%,1);}
/*25%{transform:scale(1.4,1.4);
background-color: hsla(41,97%,47%,.9);}
50%{transform:scale(1.8,1.8);
background-color:hsla(41,97%,47%,.8);}
75%{trasform:scale(2.2,2.2);
background-color: hsla(41,97%,47%,.7);}*/
100%{transform:scale(2.5,2.5);
background-color: hsla(41,97%,47%,.6);}
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>
Use animation-direction: alternate to get the effect you are after.
In the shorthand you have, just add the alternate keyword:
animation:pulseone 2s infinite alternate;
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I horizontally center an element?
(133 answers)
Closed 6 months ago.
I am making a circle shrinking and growing with the keyframes animation kit.
I've gived my div a margin-left: 45vw, and margin-top: 45vh. This obviously makes the circle not being centered all of the time as the size of the circle varies.
Is there anything I can add to my code so that the center of the circle always stays at the middle of the screen?
<!DOCTYPE html>
<html>
<style>
#ball {
width: 100px;
height: 100px;
margin-left: 45vw;
background-color: purple;
border-radius: 50%;
animation-name: sprett;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes sprett {
40% {
width: 25px;
height: 25px;
}
50% {
width: 100px;
height: 100px;
}
90% {
width: 175px;
height: 175px;
}
100% {
width: 100px;
height: 100px;
}
}
</style>
<body>
<div id="ball"></div>
</body>
</html>
For a smoother animation you would be better off using scale rather than altering height and width - it animates better but also has the added benefit that the size taken up does not change so any position you put it in to begin with remains - with the transform origin being (by default) at the center of the element you can get the look you want:
<!DOCTYPE html>
<html>
<style>
#ball {
width: 100px;
height: 100px;
margin-left: 45vw;
background-color: purple;
border-radius: 50%;
animation-name: sprett;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes sprett {
40% {
transform: scale(0.25);
}
50% {
transform: scale(1);
}
90% {
transform: scale(1.75);
}
100% {
transform: scale(1);
}
}
</style>
<body>
<div id="ball"></div>
</body>
</html>
However, you code does not exactly center the ball on every viewport (it mixes vw and px units). You can change the tranforms to transform: translateX(-50%) scale(...) and set left: 50vw to center the ball.
Trying to smoothly animate a div's background image #bg2 over a short pixel distance (while a clip path animates over it). I'm not able to get the image to move smoothly, it jitters and judders. The clip path animation is fine.
I've tried different easing (linear / ease-in-out etc) suggested in another SO thread, and also extending the distance it needs to move, but it still seems to jump pixel by pixel (sort of), rather than move smoothly. (Although, extending the move distance isn't an option in the actual use case).
How can smooth movement of the cat background image #bg2 be accomplished? Thanks.
** Edit: It's totally smooth for me in Firefox, for me it's jittery in Chrome 91.0.4472.114 on Mojave 10.14.6, and less jittery in Safari. For other it seems to be smooth on Chrome also. Hmmm...
var clickTag = "#";
#main-container {
position: absolute;
width: 970px;
height: 250px;
left:-200px;
box-sizing: border-box;
background: #333;
overflow:hidden; perspective: 800px;
border:1px solid #ccc;
}
div, img {
position: absolute;
background-repeat:no-repeat;
width: 970px;
height: 250px;
z-index: 4;
background-size: 970px 250px;
}
#bg2{
width: 970px;
height: 250px;
z-index:2;
background-image:url('https://i.stack.imgur.com/6EcDu.jpg');
-webkit-clip-path: circle(9% at 682px 110px);
clip-path: circle(9% at 682px 110px);
transform: translateY(20px);
background-position: -5px -10px;
}
#bg2{animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;-webkit-animation: groww 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;}
#-webkit-keyframes groww {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);-webkit-clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);-webkit-clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
#keyframes grow {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container" class="animate">
<div id="bg2"></div>
</div>
</a>
I'm a bit curious about why having a large banner while not displaying it all.
Anyways, I provide another way of animating, basically just changing the height. Hopefully that could give some ideas.
I removed the width to make it slightly more responsive.
The animation somewhat jittery in this solution, but I guess that it depends on your bezier curve. So perhaps that's the issue all along?
var clickTag = "#";
#main-container {
position: relative;
height: 250px;
box-sizing: border-box;
border: 1px solid #ccc;
background-color: #333;
}
#bg2 {
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
height: 40%;
aspect-ratio: 1;
border-radius: 50%;
background-image: url('https://i.stack.imgur.com/6EcDu.jpg');
background-position: right 25% center;
animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
#keyframes grow {
to { height: 80%; }
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container">
<div id="bg2"></div>
</div>
</a>
I am creating an animation while I got this weird issue. Below is a code snippet with a single div with some styles and animation applied to it.
When I run the code, during the animation, I can see a weird trailing effect on the extreme right side of the square.
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
}
<div id="outer"></div>
Whenever I click anywhere or press any button, the trails disappear.
What could be causing this and how should I solve this issue?
Also, this issue occurs only with borders. Without borders, no issue is there.
Update - This issue is with chrome browser only. While using firefox, no trailing lines are visible.
It appears to be your borders that are scaling but somehow remain behind in faded form.
If we take a more minimal example - no border radius, no flexing, you can see it clearly on this square. The first has animation duration 4s and shows separate lines which is what you get but in small form on the circle. The second has animation duration 40s and show more continuous as would be expected as more frames would be possible in the time.
Here's the snippet:
<style>
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
border-color: magenta;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
background-color: cyan;
}
</style>
<div id="outer"></div>
So, what to do about it? Somehow the borders aren't totally disappearing but are fading.
Update: here's a quick workaround - animating dimensions rather than scaling. I know it's not the best way to animate (as it possibly isn't using the GPU???) but it seems to work. Of course you'd want to put your circle (now a square) into a container which has the actual width and then use %s. It worked on Chrome, Edge, Firefox on Windows 10 and Safari and Chrome on IOS14. It also removed the slight flicker that was previously seen on Firefox and Safari [which had both worked better on the initial code than Edge or Chrome on Win10].
Snippet with workaround:
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
width: var(--w);
height: var(--w);
}
50%{
width: calc(var(--w) * 1.1);
height: calc(var(--w) * 1.1);
}
100%{
width: var(--w);
height: var(--w);
}
}
#outer{
--w: 450px;/* you don't have to use a CSS variable but this is just to make it easier to change the width/height if you need to */
border: 2px solid black;
height: var(--w);
width: var(--w);
animation: zoominout infinite 4s;
}
</style>
<div id="outer"></div>
Not quite a pulse animation -- but somewhat similar (not radial, but linear) -- I am trying to create the effect of sort of a lens flare if you turn a piece of glass and see a band of light swipe across it, in CSS. So say you have a regular background image, or a seamless repeating background image, in CSS. Now you want to animate across that image a rectangular band of light that is sort of a "fade-in ... full light ... fade-out" gradient of white light. So you have a linear-gradient sort of like transparent, semi-transparent-white, white, semi-transparent-white, transparent that flows across the background image (seamless/repeating background image, or regular background image), repeatedly flowing across like it was a pool of water in constant motion.
Wondering if this sort of thing is possible in CSS, and how to do it.
Maybe it is simply an animated linear-gradient mask (which I am not familiar with but have heard of). Not sure.
Basically animating a semitransparent linear gradient like this (just the line part, and imagine it was a simple rectangle).
Are you looking for something like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right,transparent 33%,white,transparent 66%),
url(https://picsum.photos/id/10/800/800) center;
background-size:300% 100%,cover;
animation:change 2s linear infinite;
}
#keyframes change {
from { /*Use "to" to change the direction */
background-position:right,center;
}
}
html {
background:#fff;
}
Related to get more details about the calculation:Using percentage values with background-position on a linear gradient
NOt sure if this is what you are looking for. Here it is a shot!
.ripple{
width: 50px;
height: 50px;
display: block;
position: relative;
background-color: #00ccff;
border-radius: 100%;
opacity: 0.5;
}
.ripple:before, .ripple:after{
content: '\0020';
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: 2px solid #0088ee;
transform: translate(-50%, -50%);
}
.ripple:before{
animation: ripple-one 2.5s infinite;
}
.ripple:after{
animation: ripple-one 3.5s infinite;
}
#keyframes ripple-one{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
#keyframes ripple-two{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
<label class="ripple"></label>
i have two css3 keyframes and trigger by some button, but the issue is when i try to adding a new keyframe (new class) the transition not change in smooth way, how to make this transition working smooth ?
source in fiddle here
.button {
width:50px;
height:50px;
background:silver;
}
.box {
width: 100px;
height: 100px;
background: green;
position: relative;
top: 10%;
left: 10%;
}
.box {
animation: xx 2s linear infinite;
}
.boxShake {
animation:boxShake 2s linear infinite;
}
One trick to achieve this is not to change the animation.
But make a composite animation transforming both the X and the Y in percentages.
Now, changing the width and the height of the element, we modify the amount of movement in one axis or the other of the unaltered animation
$(".button").click(function(){
$("#mover").toggleClass("alternate");
});
.button {
width:50px;
height:50px;
background:silver;
}
.box {
width: 100px;
height: 100px;
background: green;
position: relative;
top: 10%;
left: 10%;
}
.box {
animation: xx 2s linear infinite;
}
#mover {
width: 0px;
height: 20px;
transition: width 2s, height 2s;
animation: mover 2s linear infinite;
}
#mover.alternate {
width: 5px;
height: 0px;
}
#keyframes mover {
0% {transform:translate( 0%, 0%);}
10% {transform:translate(-100%, 20%);}
20% {transform:translate( 100%, 40%);}
30% {transform:translate(-100%, 60%);}
40% {transform:translate( 100%, 80%);}
50% {transform:translate(-100%, 100%);}
60% {transform:translate( 100%, 80%);}
70% {transform:translate(-100%, 60%);}
80% {transform:translate( 100%, 40%);}
90% {transform:translate(-100%, 20%);}
100% {transform:translate( 0%, 0%);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Button</div>
<div id="mover">
<div class="box"></div>
</div>
Just play with the width and height of the 2 element states, and the transition between them, to adapt it to your needs