i have a little issue with the css animation and keyframe feature...
i have a little monster with blinking eyes... the eyes should blink just 0.1s
And then i want to have a duration... and then the animation should loop.
This is my animation/keyframe:
#keyframes blinkingEyes {
0% {
transform: rotateX(0deg);
}
36% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(90deg);
}
}
And this is my animation property:
animation: blinkingEyes 0.15s 1s infinite linear;
JSFIDDLE
I found a workaround with a x% between my start and end value. But nothing works for me.. i hope you could help me
You need several keyframes for this, and then make the animation run infinite times.
See:
#monster {
margin-top: 60px;
height: 93px;
width: 75px;
border-radius: 120px;
background: yellow;
/* text-align: center; */
position: relative;
}
.eye {
height: 12px;
width: 8px;
background: black;
border-radius: 10px;
margin-top: 30px;
float: left;
animation: blinkingEyes 1.5s linear infinite;
}
.eyeLeft {
margin-left: 18px;
}
.eyeRight {
margin-left: 22px;
}
.mouth {
font-weight: 900;
transform-origin: 50% 50%;
/* display: inline-block; */
width: 5px;
margin: 0 auto;
height: 20px;
/* text-align: center; */
/* left: 47%; */
position: absolute;
top: 47px;
transform: rotate(90deg);
left: 35px;
}
#keyframes blinkingEyes {
0%, 97%, 100% {
transform: rotateX(0deg);
}
98%, 99% {
transform: rotateX(90deg);
}
}
<div id="monster">
<div class="monsterBody">
<div class="eye eyeLeft">
</div>
<div class="eye eyeRight">
</div>
<div class="mouth">
)
</div>
</div>
</div>
Related
I have made a little animation that add a line under the box from the left to the right when it's hovered and the line go back from the left to the right when the mouse isn't hovering the box, but the issue is that the line goes back from the left to the right when I refresh the page. Is there a solution to disable the animation when I open the page or when I refresh it (if possible without JavaScript)
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box:hover::after {
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<div class="box"></div>
I changed your animation to a transition instead. Is this what you're after?
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms linear;
}
.box:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
<div class="box"></div>
I don't believe this is possible using only css - you can use a css declaration when a mouse-over ends, however it will always trigger upon load.
You can however use simple JS using classes "on" and "off" to differentiate 'page load' and 'hover off'.
The code in this instance would be:
demo
$(".box").hover(
function () {
$(this).removeClass('off').addClass('on');
},
function () {
$(this).removeClass('on').addClass('off');
}
);
body {
background-color: black;
}
.box {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
height: 3px;
background-color: #fff;
}
.box.off::after {
width: 100%;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box.on::after {
width: 100%;
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?
Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.
Type of bar:
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
+
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Could someone help me please ?
Using SVG
svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 5s linear forwards;
}
#keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#428bca" stroke-width="6" fill="#333" />
</svg>
<!-- VV Click "Run code snippet" for demo -->
Since the right-side animation is shared among all the progress circles, if you want to make one that is less than 50%, you'll have to override that generic style. Then you won't need a left-side animation.
So your CSS would be something like:
.progress.yourDiv .progress-right .progress-bar {
animation: yourAnimation 1.8s linear forwards;
}
.progress.yourDiv .progress-left .progress-bar{
animation: none;
}
Where yourAnimation is the same as the shared right-side rule for .progress .progress-right .progress-bar in the Bootstrap example, except the name is changed.
For an animation to 37.5%, yourAnimation would look like this:
#keyframes yourAnimation{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here's an example, where .yourDiv is .yellow and yourAnimation is loading-3.
.progress {
width: 150px;
height: 150px !important;
float: left;
line-height: 150px;
background: none;
margin: 20px;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-right .progress-bar {
animation: loading-3 1.8s linear forwards;
}
.progress.yellow .progress-left .progress-bar {
animation: none;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">37.5%</div>
</div>
</div>
I found a CSS loading spinner here and it works great in IE and Firefox but I can't get it work in Chrome.
I added -webkit to the CSS provided but still nothing. Here is a JSFiddle of the code, test it out in the different browsers.
Is there anything I'm doing wrong or not adding?
HTML"
<div class="small progress"><div>Loading…</div></div>
<div class="progress"><div>Loading…</div></div>
<div class="large progress"><div>Loading…</div></div>
CSS:
#keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 1s infinite steps(8);
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
-webkit-transform-origin: 50% 2.5em;
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
background: #bbb;
}
Add this :
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
Link : Doc
The HTML
<div id='loader'>
<div id='loaderLargeSlice' class='loaderSlice'>
<div class='arc'></div>
<div class='arc'></div>
<div class='arc'></div>
</div>
</div>
The CSS
#loader{
position: relative;
width: 100px;
height: 100px;
margin: 14px;
border-radius: 50%;
background: none;
}
.loaderSlice
{
position:absolute;
display:block;
opacity: 0.5;
}
#loaderLargeSlice
{
height: 100px;
width: 100px;
animation: spin 4s linear 0s infinite forwards;
-webkit-animation: spin 4s linear 0s infinite forwards;
}
.arc
{
position: absolute;
top: -14px;
left: -14px;
width: 100%;
height: 100%;
background: none;
border: 14px solid rgba(0,0,0,0);
border-top-color: black;
border-radius: 50%;
}
.arc + .arc
{
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
}
.arc + .arc + .arc
{
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
}
The Problem
Firefox shows ragged edges
Anyone know of a fix?
Answering as unfixable. See #Eevee's comment on the main post.