Obligatory code, but the jsFiddle is demonstrating the issue exactly. I have a circle that expands and fades out over 3 seconds. Sonar style is my intention. The issue is on completion of the animation it "blinks" quickly then starts over.
See the issue here: http://jsfiddle.net/39MJL/3/
#-webkit-keyframes pulsate /* Safari and Chrome */{
0% {width:150px;height:150px;top:-178px;opacity:0.5;}
100% {width:900px;height:900px;top:-550px;opacity:0.1;border: 3px solid rgba(192, 61, 29, .9)}
}
#pulse1 { border-radius:50%;position:relative;height:150px;width:150px;top:-178px;
opacity:0.3; margin:0 auto;z-index:-1;border:1px solid #da4521;background-color:#DA785A;
animation: pulsate 3s infinite;
-webkit-animation: pulsate 3s infinite;
}
Has anyone run into this issue before? If you're not seeing the issue with it, do you mind sharing what browser you're using?
EDIT: Added animation support for other browsers on fiddle. Removed ease-out
From what I can figure out, the flicker you're seeing is the opacity:0.5 being reset as the animation restarts, but before it moves the circle (appearing for one frame).
One possible solution to your problem (perhaps not the most elegant) is to add an extra keyframe and set height:0px to get the circle out of the way before the animation restarts.
CSS:
#keyframes pulsate {
0% {width:150px;height:150px;top:-178px;opacity:0.5;}
90% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
99% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
100% {width:900px;height:0px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)}
}
FIDDLE - I also set the keyframes to opacity:0.0; so the circle fades out completely. Now you just need to play with opacity levels and keyframe % to get the lookt you wanted.
Related
I got a bug on using animation-timing-function in safari after updated to iOS 14.
Before iOS 14, animation-timing-function is used to control the speed of the properties (likes top, left, opacity). But now it seems to control the timing. Below is the example :
.div{
animation: my-ani 10s ease-out;
}
#keyframes my-ani {
0%, 30% {
left:0px
}
100% {
left:100px
}
}
In the past (browsers except for safari in iOS 14), the animation starts at 3s and moving to 100px with the speed of ease-out in 7 seconds. But in safari 14, it will start before 3s (I don't know the exact time) with a linear speed in more than 7 seconds. Does anyone know what is the reason for this issue? Thanks.
This question already has answers here:
How does this CSS produce a circle?
(5 answers)
Closed 4 years ago.
How about friends, I'm new to the topic of CSS. I am trying to perform to pulse effect as you can see in this image.
I would like my menu icon (icon next to word "Home") to have a similar animation.
My problem is that I do not know how to achieve a perfect circle where to achieve this animation. This is my current result:
What I can do?
this is my code:
https://multi-level-side-menu-4bj1tj.stackblitz.io
ion-header button[ion-button].bar-buttons {
border-radius: 10px;
background: transparent;
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
animation: pulse 1.5s infinite;
}
ion-header button[ion-button].bar-buttons:hover {
animation: none;
}
#keyframes pulse {
0% {
transform: scale(0.9);
}
70% {
transform: scale(1);
box-shadow: 0 1 0 10px rgba(90, 153, 212, 0);
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
I share the source code that I am doing, if you want to edit something, you must modify the app/app.css file, to see in real time.
thank you!
In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.
To create a perfect circle you need equal width and height as well as border-radius of 50%
width: 50px;
height: 50px;
border-radius: 50%;
The animation you reference is part of Google's Material Design, this is a very sophisticated CSS animation. It is possible to recreate it from scratch but that will take time.
The core of what you need is the circle to grow in size and a box-shadow to pulse out.
I've created a simplified version here
https://codepen.io/suth_a/pen/NBVNXE?editors=1100
you create animations by defining them with #keyframes name
#keyframes pulse{
100%{
box-shadow: 0 0 20px 3px #5a99d4;
transform: scale(1.2);
}
}
on hovering the animation is initiated
div:hover{
animation: pulse 1s ease-in-out infinite alternate;
}
pulse - is the name of the animation I created
1s - is the length of the animation
ease-in-out - is the easing function - https://css-tricks.com/ease-out-in-ease-in-out
infinite - tells the browser to repeat the animation indefinitely
alternate - tells the browser that at the end of each animation it should begin from the ending and work back to the beginning, that way
the animation looks smooth.
You can take my animation and work on it until you get something closer to what you want but if you're really set on that exact animation then add material design to your project and you can create buttons like this in no time
https://materializecss.com/getting-started.html
<a class="btn-floating pulse"><i class="material-icons">menu</i></a>
https://materializecss.com/pulse.html
Add the following css properties to the pulse icon (circle).
height:40px; width:40px; border-radius:50%
If the height and width don't suit your needs then you can increase them proportionally so that they are always equal to each other.
I am trying to create a loader animation using CSS3. Here is the code:
http://codepen.io/raaj-obuli/pen/RPeLer
If you look at the code, I've entered the css, in #keyframe defn, for rotating the squares from 0deg to 360deg ( as like below ). But the dices are not rotating. Please help on this and also let me know if you need more details.
#keyframes tilt{
0%{
transform: scale($scaleMin) rotate($rotateStart);
}
50%{
transform: scale($scaleMax);
background: #BC11FF;
box-shadow: 0 0 2px #D467FF;
}
95%,100%{
transform: scale($scaleMin) rotate($rotateEnd);
background: #11A8FF;
box-shadow: none;
}
}
PS. CSS is written using SCSS in the code sample.
It's missing the rotate() in 50% section.
$rotateMid: 225deg;/*added, adjust the value as needed*/
span {
animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}
50%{
transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}
Updated: http://codepen.io/anon/pen/QbJmbO?editors=110
Differences between the transition timing functions:
ease-in will start the animation slowly, and finish at full speed.
ease-out will start the animation at full speed, then finish slowly.
ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
ease is like ease-in-out, except it starts slightly faster than it ends.
linear uses no easing.
Source: https://stackoverflow.com/a/9636239/483779
I was initially using jQuery's slide functions to slide a page out of view (to reveal another page beneath it) in a Cordova app I'm making, and whilst this worked perfect on my desktop browser, it (now understandably) was quite choppy on the actual mobile device. So I found out the reason for this and learnt that I should use CSS3 animations/transitions for mobile devices, and more specifically Translate3d for anything that may require GPU rendering. So I've made those changes like this:
#mainpage{
z-index: 10;
top: 0;
-webkit-transition: all .5s linear;
transition: all .5s linear;
border-bottom: 1px solid #111111;
}
#mainpage.out{
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
and I just toggle the 'out' class as necessary.
The transition runs smoothly until about 50px are left on the screen (or the page has about 50px left to reappear), then it stops for about a second before finishing up. I was wondering if anyone has any suggestion as to why this may be the case or if there's maybe an even more efficient way of doing this.
The device I am using has a nVIDIA Tegra 3 CPU with 12-Core High Performance Graphics.
I think this is not the way you should do the animation.
Try the following:
#mainpage {
z-index: 10;
top: 0;
border-bottom: 1px solid #111111;
-webkit-transition: -webkit-transform .5s linear;
transition: transform .5s linear;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainpage.out {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
First change is, specify the type of the property you want to animate (the transition parameter), not sure what you are animating when you write all.
Second thing, specify the "back" transition with translate3d(0,0,0). Also not sure, if it makes a difference here, though. I hope this helps you.
yesterday i tried to animate text-shadows using keyframe animations.
the css looked something like this...
.sometxt{
-webkit-animation:shadow 5s linear 0s infinite alternate;
animation:shadow 5s linear 0s infinite alternate;
}
#-webkit-keyframes shadow {
0%{text-shadow:0px 0px green;}
100%{text-shadow:5px 0px green;}
}
#keyframes shadow {
0%{text-shadow:0px 0px green;}
100%{text-shadow:5px 0px green;}
}
(JS Fiddle: http://jsfiddle.net/3yB8q/1/)
I kept previewing the page in firefox, where the animation looks great and runs fluid. looked at it chrome however, the whole thing looks like a stop-animation. taking the code above for example, every second the shadow JUMPS one pixel aside. while in firefox it is drawn as one smooth move.
How can I prevent this happening?