I'm trying to use the following code to objects float from left to right in the background. Unfortunately when it goes off screen a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I tried percentage (100% with the to transition) but it didn't work. I don't know it's supposed to? I was hoping someone could tell me how to fix this, if it is fixable using just CSS.
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
overflow-y:hidden;
}
.largest-slowest {
-webkit-animation: cssAnimation 12.7734s 16 linear;
-moz-animation: cssAnimation 12.7734s 16 linear;
-o-animation: cssAnimation 12.7734s 16 linear;
}
#-webkit-keyframes cssAnimation {
from {-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-100px);}
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
In addition to the comment above, you need to add overflow-y: hidden to the parent of .largest-slowest instead of to .largest-slowest itself. So if you don't want the window to scroll when .largest-slowest goes off the screen, your CSS should look something like:
body {
overflow-y: hidden;
}
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
}
Related
I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
#keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Just remove this line transform: translateY(-50%) !important; and it will work like here:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="pageloading-mask">
<div></div>
</div>
see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works
I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
Now, as you can see, it return to the original sizes suddenly, without any smoothness.
My keyframes:
#keyframes imageZoom {
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom {
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom {
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
The child div styles:
#myFeaturedItems:hover article {
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#myFeaturedItems article {
background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
background-position: center center;
background-size: cover;
display: block;
height: 100%;
width: 100%;
}
My demo link: http://emanuelezenoni.com/dev/test/
Thanks a lot!
You don't need an animation to achieve what you want. A transition when you hover over the article is suitable. See my very basic example of the transition here below.
What it does:
transition: transform 1s ease-in-out;
This will put a transition on the property transform for 1s with easing ease-in-out. When you hover over .box, the transform: scale(1.25); will run, because we said that a transition was applied on it. The overflow: hidden; makes sure that the content will not be bigger than the box it's in.
You can tweak with the settings to your needs.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.box {
margin-left: 50%;
width: 50%;
min-height: 100%;
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
.box:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="container">
<article class="box">
</article>
</div>
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Im trying to make a snake loader spinner with css using keyframes animation but i don't know it doesn't work
someone can help?
here the fiddle:
https://jsfiddle.net/fs6kafsn/
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: rotate 0.8s infinitelinear!important;
-webkit-animation: rotate 0.8s infinitelinear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
thanks in advance
You need to add prefixing to your keyframes as well.
fiddle demo
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This would need to be prefixed with -moz- as well for firefox compatibility.
Note
the unprefixed version should always be placed after the prefixed versions.
Full Demo
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
-webkit-animation: rotate 0.8s infinite linear !important;
-moz-animation: rotate 0.8s infinite linear !important;
animation: rotate 0.8s infinite linear !important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
#-webkit-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="spinner">
</div>
For webkit based browser like chrome you need #-webkit-keyframes and for Mozilla firefox you need #-moz-keyframes
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation: spin 0.8s infinite linear!important;
-webkit-animation: spin 0.8s infinite linear!important;
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
<div class="spinner">
</div>
I changed your fiddle. Here is the working animation: fiddle:
Code:
#-moz-keyframes myanimation /* Firefox */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#-webkit-keyframes myanimation /* Safari and Chrome */
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.spinner {
display: block;
margin: 50px;
height: 28px;
width: 28px;
animation:myfirst 5s;
-moz-animation:myanimation 0.8s infinite linear; /* Firefox */
-webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
border: 8px solid red;
border-right-color: transparent;
border-radius: 50%;
position:relative;
}
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate