I'm trying to make a loading spiner with icon from https://materialdesignicons.com/ but the icon doesn't just rotate, it also moves slightly from the center.
I have these styles:
#keyframes spin-animation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spin:before {
display: block;
transform-origin: center center;
-webkit-backface-visibility: hidden;
-webkit-animation: spin-animation 2s linear infinite;
animation: spin-animation 2s linear infinite;
}
It's <i class="mdi mdi-something spin"> element. So it has added :before with content of the icon.
This element sits in an absolutely positioned wrapper, with display: flex, horizontally and vertically centered.
The problem is that when the icon rotates, it doesn't rotate around its center. The axis moves by a little. The icon doesn't stay in one centered position, instead it moves slightly.
I've tried:
Giving width and height to the i element
Giving width and height to the :before element
Moving the spiner animation from i to :before
Different styles which I've found on stackoverflow, e.g. transform-origin: center center;
The icon itself has the same x and y dimensions so it shouldn't be a problem. The dimensions change when it rotates, but I guess that's correct?
Have a look at Gabriele Petrioli answer in this thread: https://stackoverflow.com/a/14859567/1374439 on how to implement spin with CSS3.
Based on his suggestion the below worked perfectly for me.
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
It is now 2021, use mdi-spin
Example:
mdi mdi-loading mdi-spin
Related
I wanna rotateY() but from center of this earth image. Now it's rotating from the right side. Here is my code:
#keyframes rotate {
to {
transform: rotateY(-360deg);
}
}
http://jsfiddle.net/qwrg9684/
It works if you operate on the image directly. https://jsfiddle.net/akso4r6q/
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" />
#logo {
animation: rotate 5s linear infinite;
transform-origin: center center;
}
#keyframes rotate {
to {
transform: rotateY(360deg);
}
}
If you need it to be in a div you can also set display: inline-block;. The appearance of rotating around the right side of the image is actually the rotation happening around the center of the enclosing div which is expanding horizontally to fit the viewport.
You can see a fiddle here that shows this with a text element that is a sibling of the image.
i have a svg icon with three parts, the fb logo, a ring of dashes which is currently set to not visible and an outer ring. the outer ring is the problem. i am using the hover psuedo selector to expand the ring with the scale() property. it scales fine, the problem is that it shoots off to the right instead of just staying put in the center. according to what i have read using transform-origin: center center or 50% 50% should fix it (and it has on the other logos ive been working on) it does not in this instance.
heres the pen the relevant code starts on line 24
https://codepen.io/cole-pratt/pen/poJJdzy?editors=1100
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
}
.facebook-detail {
opacity: 0;
}
.facebook-icon-group:hover {
.facebook-outline {transform: scale(1.8); opacity: 0;}
}
You're right the default is not to scale from the centre it's to scale the viewBox. You can fix that by adding
transform-box: fill-box;
e.g.
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
transform-box: fill-box;
}
.
I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
I have a web page that contains five divs. A user can switch between the divs by clicking a next or previous button. If next is clicked, I fade-in the next div on top of the existing one and fade-out the existing div. Imagine something like flipping through some pictures.
My problem is, I am only animating the opacity property. Because of this, the users cannot interact with some of the elements of the visible div. My hunch is that its because there is an invisible div on top of it.
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
#keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
.fade-in {
opacity: 0;
position: relative;
top: 0;
left:1rem;
animation: fadeIn 0.3s ease-in;
animation-fill-mode: forwards;
}
.fade-out {
opacity: 1;
position: relative;
top:0px;
left:1rem;
animation: fadeOut 0.3s ease-in;
animation-fill-mode: forwards;
}
Is there a way using CSS, that I could change the display property from inline to none when the fade-out animation has completed? I know I could wire up some jQuery. However, that seems kind of clumsy. It seems like there should be a way for me to change an element from visible to hidden after the 0.3s have elapsed.
Any help is appreciated.
Yes, opacity will keep the invisible overlaying elements on-top.
Animate opacity, but at the same time toggle visibility from/to hidden/visible allowing interaction with underlying elements once an element is visibility:hidden
Also, instead of relative since you want a fade-trough effect, absolute should best fit your requirements.
I'm trying to make a cube appear at the top of the page with css animation and keyframes.
but he appears at the beginning and only after does the animation.
how do i make it appear just from above?
I wanted that loads up the page and past two seconds the cube appeared.
<div id="cube"></div>
cube{
position: relative;
left:60px;
width:100px;
height:200px;
background:red;
-webkit-animation-name: cube;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 0.8s;
}
#-webkit-keyframes cube {
0% {top: -200px;}
100% {top: 0;}
}
here is my example
http://jsfiddle.net/hmmatos/epZJB/
Sorry if I've misunderstood your question, but I'm not really sure how you mean so I've done two different examples hoping that at least one of them will help you.
Demo One
What I've done here is I've added -webkit-animation-fill-mode: forwards; which will maintaine the last state of the animation, making the div stay visible at the position you have set.
Demo Two
In this demo, I'm animating the opacity instead of the positions.
So insted of sliding the div from top: -80; to top: 0; the div fill just fade into place. Also this example uses the -webkit-animation-fill-mode: forwards;.
Here's a good resource if you want to read about CSS animations.
http://www.w3.org/TR/css3-animations/
Hope this helps!