I am trying to set an animation on some of my buttons by adding a dedicated class. I have created an animation, which works in Chrome, but not in Safari (I'm using SCSS, so it's automatically prefixed for me).
When I try other properties (such as rotate), the animation actually works, but not with "outline". I also have tried to "separate" the properties (instead of the shorthanded version), to no avail.
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
<button class="awesome comparable_data">Awesome</button>
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid color(default);
outline-offset: 1px;
}
75% {
outline: 4px solid color(default);
outline-offset: 4px;
}
100% {
outline: 5px solid color(default);
outline-offset: 5px;
}
}
On Chrome, my button is "glowing" with the outline expanding back and forth from the button. On Safari, nothing is happening... and I cannot figure out why.
I was able to get it to work by specifying a starting state in the comparable_data class:
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
outline: 2px solid red;
}
#keyframes showComparableData {
0% {
outline: 0px solid red;
outline-offset: 0px;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
You might need to edit the values or add some margin, since it clips out of view sometimes.
I also added an outline-offset to the first keyframe - it's not strictly necessary, as far as I know, but can be useful to see.
My div has an animation on it's border when hovering.
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
}
div:hover {
animation: blink 750ms forwards;
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div></div>
<div></div>
<div></div>
The animation is works fine as expected but when I hover off the div, the animation brakes suddenly. I want to keep the animation complete even though the cursor is away.
I've tried to add the transition: border-color 300ms; on the div but still it behaves the same.
You can try this:
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
transition:1000s; /*block the change*/
}
div:hover {
animation: blink 750ms; /*remove forwards*/
/*Add the last state of the animation*/
border-left: 1px solid rgba(255,255,255,1);
border-right: 1px solid rgba(255,255,255,1);
/*---*/
transition:.5s; /*make the change fast on hover*/
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div></div>
<div></div>
<div></div>
UPDATE
To make sure the animation will end, you need to keep the hover state. An idea is to consider a pseudo-element that will cover all the screen to be sure you will keep the hover until the end:
body {
padding: 50px;
background-color: #000;
text-align: center;
}
div.box {
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,0.1);
display: inline-block;
margin: 0 10px;
transition:1000s; /*block the change*/
position:relative;
}
div.box:hover {
animation: blink 750ms; /*remove forwards*/
/*Add the last state of the animation*/
border-left: 1px solid rgba(255,255,255,1);
border-right: 1px solid rgba(255,255,255,1);
/*---*/
transition:.5s; /*make the change fast on hover*/
}
div.box:hover:before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
animation:disappear 0.1s 0.75s forwards;
}
#keyframes disappear {
to {bottom:100%;}
}
#keyframes blink {
0% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
33% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
66% {
border-left-color: rgba(255,255,255,0.1);
border-right-color: rgba(255,255,255,0.1);
}
100% {
border-left-color: rgba(255,255,255,1);
border-right-color: rgba(255,255,255,1);
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
On a website, I was creating an object that that had a border animation on it. I had searched this question a lot of times on Stack Overflow and google, but no solution worked. My animation animated the border:
.object-color {
-webkit-animation: color 1.5s linear infinite alternate both;
animation: color 1.5s linear infinite alternate both;
}
#-webkit-keyframes color{
14.3% {
color: red;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid green !important;
}
28.6% {
color: green;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid red !important;
}
100% {
color: green;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid red !important;
}
}
However, when it was applied, the border didn't animate and had no color. Any help would be great, thanks!
The problem is with your use of !important inside of keyframes. Simply removing the !important declarations will cause your animation to work:
.object-color {
-webkit-animation: color 1.5s linear infinite alternate both;
animation: color 1.5s linear infinite alternate both;
}
#-webkit-keyframes color {
14.3% {
color: red;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid green;
}
28.6% {
color: green;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid red;
}
100% {
color: green;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid red;
}
}
<div class="object-color">Hi</div>
Hope this helps! :)
I have this fiddle https://jsfiddle.net/kywetbeL/19/ and in only CSS and HTML. I wanted to make a donut chart that had 5 chunks and a border and a small gap between each part.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center {
background: #ffffff;
position: absolute;
text-align: center;
font-size: 28px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 130px;
height: 130px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 15% 0 0;
}
.portion-block {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.circle {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#part1 {
transform: rotate(326deg);
}
#part1 .circle {
background-color: #E64C65;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: first 1s 1 forwards;
}
#part2 {
transform: rotate(38deg);
}
#part2 .circle {
background-color: #11A8AB;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: second 1s 1 forwards 1s;
}
#part3 {
transform: rotate(110deg);
}
#part3 .circle {
background-color: #4FC4F6;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: third 0.5s 1 forwards 2s;
}
#part4 {
transform: rotate(182deg);
}
#part4 .circle {
background-color: #4FC433;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: fourth 0.5s 1 forwards 3s;
}
#part5 {
transform: rotate(254deg);
}
#part5 .circle {
background-color: #4FC888;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
animation: fifth 0.5s 1 forwards 4s;
}
/* Animation */
#keyframes first {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes third {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes fourth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
#keyframes fifth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(68deg);
}
}
<div class="container">
<div class="donut-chart-block block">
<div class="donut-chart">
<div id="part1" class="portion-block">
<div class="circle"></div>
</div>
<div id="part2" class="portion-block">
<div class="circle"></div>
</div>
<div id="part3" class="portion-block">
<div class="circle"></div>
</div>
<div id="part4" class="portion-block">
<div class="circle"></div>
</div>
<div id="part5" class="portion-block">
<div class="circle"></div>
</div>
<p class="center"></p>
</div>
</div>
</div>
I can't seem to get the border around the entire element, only the top.
I would first update your code using my previous answer and then consider a filter to create a border:
.palette {
--g: 10px; /* The gap between shapes*/
--s: 50px; /* the size*/
width: 250px;
aspect-ratio: 1;
display: inline-grid;
filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}
.palette > * {
grid-area: 1/1;
position: relative;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(33.745% - var(--g)/2),
50% calc(50% - var(--g)/2));
}
.palette > *:before {
content:"";
position: absolute;
inset: 0;
border-radius: 50%;
border: var(--s) solid #0000;
border-left-color: var(--c);
animation:m 1s linear both var(--d,0s);
}
#keyframes m {
from{transform:rotate(45deg)}
to {transform:rotate(135deg)}
}
.color1 {
transform: rotate(0deg);
--c: red;
}
.color2 {
transform: rotate(72deg);
--c:blue;
--d:1s;
}
.color3 {
transform: rotate(144deg);
--c:orange;
--d:2s;
}
.color4 {
transform: rotate(216deg);
--c:green;
--d:3s;
}
.color5 {
transform: rotate(288deg);
--c:purple;
--d:4s;
}
<div class="palette">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
</div>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 1s;
}
#-webkit-keyframes {
0% {background-color:#4CAF50;}
25% {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
I have started learning css3 animations. All the animations which i wanted to do seem to run fine except for the color change which i have put in 'keyframes'. The website from which I was learning animations showed the exact same way but it doesn't seem to work on my project. Any help would be highly appreciated. Thanks :-)
You have to give the animation a name..and then apply that animation as a property...
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button {
animation: color-change 12s ease infinite;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
animation: color-change 12s ease infinite;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 1s;
}
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>