I'm serving up Animate.css from this CDN to my WordPress site and would like to create some CSS class overrides that will allow me to delay the amount of time that occurs, before the animation repeats. Currently, the animations are set to "infinite" repeat.
Here's a live example of how the animated image just keeps repeating, very quickly.
I'd like to be able to apply class="delay4" for example, if I wanted there to be a 4s delay after an animation occurs. Then after those 4s the animation would repeat.
I can easily add CSS overrides to my theme so this would be best option since I'm using a CDN.
BONUS!! It would be ideal if I could also specify a duration for the animation. i.e. Some of the animations happen so fast and I think if they were slowed down a bit, they might look better.
I have two solution on this one is purely custom css based and other is animate.css + jquery based.
Css Solution:
img {
animation: shake 5s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
2% { transform: translate(-1px, -2px) rotate(-1deg); }
4% { transform: translate(-3px, 0px) rotate(1deg); }
6% { transform: translate(3px, 2px) rotate(0deg); }
8% { transform: translate(1px, -1px) rotate(1deg); }
10% { transform: translate(-1px, 2px) rotate(-1deg); }
12% { transform: translate(-3px, 1px) rotate(0deg); }
14% { transform: translate(3px, 1px) rotate(-1deg); }
16% { transform: translate(-1px, -1px) rotate(1deg); }
18% { transform: translate(1px, 2px) rotate(0deg); }
20% { transform: translate(1px, -2px) rotate(-1deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
<img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/>
Jquery Solution:
var $post = $(".img1");
setInterval(function(){
$post.toggleClass("animated");
}, 4000);
div{ text-align:center; with:100%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<div class=" shake infinite animated img1"><img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/></div>
Related
I managed to put the same bootstrap spinner animation behind my lazyloaded images through CSS position: relative and z-index on my masonry grid. After images are loaded the loaded images are displayed above (z-index) the animation and i do not remove them. They just run behind the images.
Any downside on doing this with regards to webpage & browser rendering and so on performance, because my site uses infinite scroll and a lot of images are coming into view?
For the mentioned animation I'm using the following:
.lodi:before,
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8)
}
#-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
#keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
.fa-rotate-90 {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Here's the demo: http://codepen.io/anon/pen/WGLGyY
the DIV doesn't rotate when the keyframe is:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: scale(2, 2) rotate(180deg) translate(200px,200px)
}
}
when I change the keyframe to:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: rotate(360deg) scale(2, 2) translate(200px,200px)
}
}
It rotate again.
So what's the reason here?
I know the order may affect the transform.
Maybe because rotate(360deg) equals rotate(0); But when I change the order of transform it comes back again....
Use transform: none for your first keyframe, and it will rotate.
Here it is in action:
#keyframes test1{
0% {
transform: none;
}
100% {
transform: scale(2, 2) rotate(360deg) translate(200px,200px)
}
}
#test{
width:200px;
height: 200px;
background: red;
animation: test1 3s infinite
}
<div id="test"></div>
I'm trying to grow a circular image on hover, but can't get this code to work.
I can get the circle to grow using the CSS transform but it grows immediately and is a bit ugly. Ideally I'd want there to be a 2-3000ms delay with linear growth both on hover and mouse out.
I know I can do this with JS/D3 but need to do it with CSS if possible.
Have tried
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
width:250px;}
25%
{
width:260px;}
75%
{
width:270px;}
100%
{
width:280px;
}
}
and
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
25%
{
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);}
75%
{
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);}
100%
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
But neither are working.
Is there a better way to do this?
I've created a pen based on your code
Using transform: scale is a better method since it increases both width and height.
The key thing you missed out on for creating a smooth animation is the transition attribute, this needs to be applied to the element in it's normal state not it's :hover state.
I've added this transition styling:
transition: 3s ease-in-out;
Note that it's the same length as your animation timing. ease-in-out is a standard easing function, if you'd like to get more in-depth try playing around with cubic-bezier
Animation delay can be added easily with this attribute:
animation-delay:2s
Another thing which makes keyframe animations smoother is having the 0% and 100% stylings the same, so in this example the circle returns to the original scale by the time it reaches 100% which creates a nice, smooth, repeatable animation.
I've also created an alternative animation which looks even smoother, this is done by simply setting scale for the 0% and 100% points in the animation:
0%{transform: scale(1)}
100%{transform: scale(2)}
Another thing you can do is change your animation loop setting from normal to infinite alternate, checkout my second example this is using infinite alternate which makes the circle grow and shrink with no sudden snaps.
You can delay the start of an animation with animation-delay
Such as
.delay {
animation-delay:2s
}
Reference # MDN
Demo showing the difference below
.circle {
border-radius: 50%;
display: block;
}
.circle:hover {
animation: mymove 3s normal;
}
.delay:hover {
animation-delay: 2s
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
}
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>
You can delay the start of the transition by using the transition-delay property.
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
W3Schools
Ok. I tried to search for this question. and it's very simple. I have a css swing animation working good in firefox but not in chrome. Of course, I added the webkit prefix. but still no luck. I changed the iteration count to infinite and finally it is working, but no I don't want it to run infinitely. Is this really a bug? does anybody find a solution? here's the link to the code I made in jsfiddle .. http://jsfiddle.net/7t1uvyup/2/ and here's the actual code.
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
I did some research.. CSS is Hardware-Accelerated..
So this is not just a weird random bug.
I ran into this problem just now. To me it seems that the animation takes place in very short period of time and many times it is not noticable to human eyes; i.e. Chrome does not respect animation duration parameter when webkit-animation-iteration-count is not infinite.
To me it doesn't seem to be a random bug. It is reliably reproducible.
Try visiting http://www.w3schools.com/css/css3_animations.asp with different browsers. Chrome shows the worst performance; CSS3 animation box does not animate; it just stays.
I have this code for a loading spinner, it works in all browsers, except safari, where it breaks the entire site, I've narrowed it down to the issue being the webkit specific code below but can't figure out why it brakes, any ideas:
#-webkit-keyframes spin{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; }
#-webkit-keyframes spinoff{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); }; }
You have unnecessary semicolons after the 100% definition in your code. Apparently Safari chokes on it while the others ignore it.
#-webkit-keyframes spin{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes spinoff{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); }
}