I am using in my app the IcoMoon App fonts, for symbols.
At some part of my app, I like to use a rotating arrow by using the CSS3 Animation options, but for some reason, this doesn't work for me.
You can see my live code in FiddleJS
As you can see, in the element
<i class="loading icon-progress rotate"></i>
I have implement all the appropriate classes, but the animation does not run. Can somebody to help me ?
Am I doing something wrong ?
NOTE: I also have try the following in my CSS Code
.rotate
{
....
}
but still no results
The font I have installed is the following : http://i.icomoon.io/public/temp/9c89e0f9cb/BusinessDirectory/style.css
I've looked at your fiddle and if you remove the top: 0px and left: 0px property in each animation step, the animation works.
This link explains why:
Stackoverflow - Multiple properties in keyframe
I've tried that with percentage, em and rem and it seems like positional properties are not wanted in your keyframes.
#keyframes rotationAnimation
{
0%
{
transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-moz-keyframes rotationAnimation
{
0%
{
-moz-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-moz-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-webkit-keyframes rotationAnimation
{
0%
{
-webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-o-keyframes rotationAnimation
{
0%
{
-o-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-o-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-ms-keyframes rotationAnimation
{
0%
{
-ms-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-ms-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
Above code works - funny thing if you use margin-* properties in one of the keyframes the margin gets animated not the rotate.
I've not enough CSS3 expertize to know why :/
edit:
Okay I've played a little more aaaand you need to write additional properties into the *-transform like
#-webkit-keyframes rotationAnimation
{
0%
{
-webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0,top: 0;
}
100%
{
-webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0, top:0;
}
}
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);
}
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>
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
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); }
}