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>
Related
How can I do this animation?
I did it with outline-offset border on hover I don't know how to make the animation.
.orange-button {
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
border-radius: unset;
border: unset;
}
.orange-button:hover {
color: white;
background: #B18D3A;
outline: 2px solid #C09E50;
outline-offset: 2px;
}
<div class="button-container">
<button class="orange-button" type="button">Zxxx</button>
</div>
This should help you:
.orange-button { /*This is your basic style for your button*/
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
position: absolute;
border: none;
}
.orange-button:hover { /* This is your style of button on hover */
background: #B18D3A;
cursor: pointer;
}
.orange-button::before { /* This is the first line */
content: "";
position: absolute;
top: -4px; /* Starting at the top away from the button by 4px (2px of the thickness plus the 2px of the offset */
left: -4px; /* Starting at the left away from the button by 4px (2px of the thickness plus the 2px of the offset */
width: 0; /* The width and height are both 0 so it is not visible at the start */
height: 0;
background: transparent;
border: 2px solid transparent;
}
.orange-button:hover::before {
animation: animate 0.5s linear forwards; /* Animate the first line of the border by keyframe animate (bellow), the animation takes 5s , linear meaning it takes the same speed from start to finish */
}
#keyframes animate { /* Defining the animate keyframe for the first line */
0% {
width: 0; /* At 0% it starts with 0 width and 0 height (invisible) */
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {/* At 50% the line in the width of button should be 50% and also in the height of the button */
width: 50%;
height: 50%;
border-top-color: #C09E50;
border-right-color: transparent; /* Defining which borders should be visible since it's the first line it should only be the left and top */
border-bottom-color: transparent;
border-left-color: #C09E50;
}
100% { /* The same thing except you need to add 4px */
width: calc( 100% + 4px);
height: calc( 100% + 4px);
border-top-color: #C09E50;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #C09E50;
}
}
.orange-button::after { /* The same as before except it starts at the bottom right */
content: "";
position: absolute;
bottom: -4px;
right: -4px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.orange-button:hover::after {
animation: animates .5s linear forwards;
}
#keyframes animates {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 50%;
height: 50%;
border-top-color: transparent;
border-right-color: #C09E50;
border-bottom-color: #C09E50;
border-left-color: transparent;
}
100% {
width: calc( 100% + 4px);
height: calc( 100% + 4px);
border-top-color: transparent;
border-right-color: #C09E50;
border-bottom-color: #C09E50;
border-left-color: transparent;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button class="orange-button"> <!-- This is your button -->
Hi
</button>
</body>
</html>
Use this property:
.orange-button {
width: 137px;
height: 35px;
background: #C09E50;
color: #F7F7F5;
border-radius: unset;
outline: 1px solid transparent;
outline-offset: 50px;
transition: 0.2s all ease;
}
.orange-button:hover {
outline: 1px solid #B63A6B;
outline-offset: 0;
}
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>
This question already has answers here:
Change Bootstrap tooltip color
(40 answers)
Closed 6 years ago.
I'm trying to style tootltips using
.tooltip-inner{}
But i'm having troubles cause i can't find how to style tooltip small arrow.
As shown on screenshot the arrow of the tooltip is black i want to add new color on that:
any suggestion?
You can use this to change tooltip-arrow color
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
Use this style sheet to get you started !
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0)
}
.tooltip.in{
opacity:.8;
filter:alpha(opacity=80)
}
.tooltip.top{
margin-top:-2px
}
.tooltip.right{
margin-left:2px
}
.tooltip.bottom{
margin-top:2px
}
.tooltip.left{
margin-left:-2px
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
top:50%;
right:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
top:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
top:50%;
left:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid #000
}
.tooltip-inner{
max-width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
.tooltip-arrow{
position:absolute;
width:0;
height:0
}
I have created fiddle for you.
Take a look at here
<p>
<a class="tooltip" href="#">Tooltip
<span>
<img alt="CSS Tooltip callout"
src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
<strong>Most Light-weight Tooltip</strong><br>
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
</p>
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 240px;
line-height: 16px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #111;
border: 1px solid #DCA;
background: #fffAF0;
}
.callout {
z-index: 20;
position: absolute;
top: 30px;
border: 0;
left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}
The arrow is a border.
You need to change for each arrow the color depending on the 'data-placement' of the tooltip.
.tooltip.top .tooltip-arrow {
border-top-color: #color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: #color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:#color;
}
.tooltip.right .tooltip-arrow {
border-right-color: #color;
}
.tooltip.left .tooltip-arrow {
border-left-color: #color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip > .tooltip-inner {
background-color: #color;
}
For styling each directional arrows(left, right,top and bottom), we have to select each arrow using CSS attribute selector and then style them individually.
Trick: Top arrow must have border color only on top side and transparent on other 3 sides. Other directional arrows also need to be styled this way.
click here for Working Jsfiddle Link
Here is the simple CSS,
.tooltip-inner { background-color:#8447cf;}
[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}
[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}
[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
You can always try putting this code in your main css without modifying the bootstrap file what is most recommended so you keep consistency if in a future you update the bootstrap file.
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Notice that this example is for a right tooltip. The tooltip-inner property changes the tooltip BG color, the other one changes the arrow color.
This one worked for me!
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
If you want to style only the colors of the tooltips do as follow:
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
In case you are going around and around to figure this out and none of the options above are working, it is possible you are experiencing a name space conflict of .tooltip with bootstrap and jquery.
See this answer on how to fix: jQueryUI Tooltips are competing with Twitter Bootstrap
You can add 'display: none;' to .tooltip-arrow class
.tooltip-arrow {
display: none;
}