I have a WordPress site: http://powersmart.tech/wordpress/
I want my webiste logo to rotate like this: https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0
I have made my logo to rotate in a circle using following code:
#Top_bar #logo img {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
Please guide me.
Thanks
You're using the wrong transformation type, this is achieved using scaleX rather then rotate. I've made a small demo how this should work:
#logo {
margin: 50px;
width: 50px;
height: 50px;
background-color: red;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#-moz-keyframes spin {
50% {
-moz-transform: scaleX(0.1);
}
}
#-webkit-keyframes spin {
50% {
-webkit-transform: scaleX(0.1);
}
}
#keyframes spin {
50% {
-webkit-transform: scaleX(0.1));
transform: scaleX(0.1);
}
}
<div id="logo"> hi </div>
Related
I have a gear image rotating using keyframe spin of CSS. but I want to resize the width of the image less than the height like in the image (see gear image below).
Demo gear rotating
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
You can make use of the ScaleX transform value at various keyframe steps. It resizes at the last step to show you the difference in the size of it.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: scaleX(0.5) rotate(360deg);
}
50% {
transform: scaleX(0.5) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
#m4n0's answer works well. An alternate approach to timing rotations is to simply wrap .gear with another element, and transform the containing element:
<div class="gear__wrapper">
<img class="gear" />
</div>
.gear__wrapper {
transform: scaleX(0.5);
}
It might be handy but if you are expecting something else, you might need to time the rotations and all.
I have only added the simple, please other prefixes.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin linear 4s infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg) scaleX(1);
}
50%{ transform: rotate(180deg) scaleX(0.5);
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is there a way I can make the element fade out after it fades in by editing css for this same class?
Use css #keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
#keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
Reading: Using CSS animations
You can clean the code by doing this:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
By setting animation-fill-mode: forwards the animation will retain its last keyframe
By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)
I found this link to be useful: css-tricks fade-in fade-out css.
Here's a summary of the csstricks post:
CSS classes:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In React:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Try creating a keyframes animation for the opacity attribute of your element:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>
<div>
<p>[Element to fade]</p>
</div>
(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools # https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)
Try this:
#keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
.ball{
position:absolute;
top: 200px;
left: 300px;
height:100px;
width:100px;
background-color: yellow;
border-radius: 100px;
-webkit-animation: balls 4s linear;
animation: balls 4s linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes balls {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
100% { transform: rotate(0deg) translateX(150px) rotate(360deg); }
}
#keyframes balls {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
The above was my code to rotate in the circuar motion. I want my start and end degree as same and also it should rotate in the circular motion. Please help me with the solution to my problem
I would use this code to rotate a image (it never stops):
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
If you just want 360 degrees, delete the word infinite and it should work.
EDIT: Here a Demo
Have found solution for my problem.
By having 'from' degree we can calculate the 'to' degree as 'from+359' so it will rotate a whole round by having the single degree
Ok, so, I made a code, and what I am looking for is to have an image, rotating forever and it is working, but only in firefox, it isn't working in chrome, can anybody help?
Code:
<div align="left" class="header">
<img src="http://files.enjin.com/177852/SD/PortalHeaderContinuous1.png" class="header2" style="position:fixed; z-index:50; margin-left:-120px; margin-top:20px;">
</div>
<style>
.header2{
animation: rotate 5s linear 0s infinite;
-webkit-animation: rotate 1s linear 0s infinite;
}
#keyframes rotate
{
0% {}
100% {-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);}
}
</style>
Change your CSS to:
.header2{
-webkit-animation:rotate 4s linear infinite;
-moz-animation:rotate 4s linear infinite;
animation:rotate 4s linear infinite;
}
#-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Like this fiddle
CSS
div{
display:inline-block;
}
.parent{
border:1px solid grey;
}
.child{
height:100px;
width:100px;
border-radius:9px;
background:blue;
margin:10px;
}
.rotate {
-webkit-animation:rotate 4s linear infinite;
-moz-animation:rotate 4s linear infinite;
animation:rotate 4s linear infinite;
}
#-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
HTML
<div class='parent'>
<div class='child'>
</div>
</div>
<a id='rotate' href='#'>Rotate</a>
jQuery
$('#rotate').click(function(){
$('.child').addClass('rotate');
});
You need the prefix for the Keyframes too so change your CSS to this :
#keyframes rotate
{
0% {}
100% {transform: rotate(-360deg);}
}
#-webkit-keyframes rotate
{
0% {}
100% {-webkit-transform: rotate(-360deg);}
}
The demo http://jsfiddle.net/phk24/2/
I want to make a rotation of my loading icon by CSS.
I have an icon and the following code:
<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}
.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
<div id='test' class='rotating'></div>
But it doesn't work. How can the icon be rotated using CSS?
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>
Working nice:
#test {
width: 11px;
height: 14px;
background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>
Infinite rotation animation in CSS
/* ENDLESS ROTATE */
.rotate{
animation: rotate 1.5s linear infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
}
/* SPINNER JUST FOR DEMO */
.spinner{
display:inline-block; width: 50px; height: 50px;
border-radius: 50%;
box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
MDN - Web CSS Animation
Without any prefixes, e.g. at it's simplest:
.loading-spinner {
animation: rotate 1.5s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
Works in all modern browsers
.rotate{
animation: loading 3s linear infinite;
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}
#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
div{
animation: rotate 4s linear infinite;
}
Simply Try This. Works fine
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#loading {
width: 16px;
height: 16px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}
<div class="loading-test">
<svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>
Rotation on add class .active
.myClassName.active {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<style>
div
{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>
the easiest way to do it is using font awesome icons by adding the "fa-spin" class. for example:
<i class="fas fa-spinner fa-3x fa-spin"></i>
you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners
here you have the documentation from font awesome:
https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use