i need to animate the border bottom of the div using keyframe animation without using :before or :after or modifying the current html structure
div{
padding:3px 6px;
display:inline-block;
position:relative;
border-bottom: 2px solid black;
}
<div><h1>Lorem Ipsum</h1></div>
You can simulate it like below. Hope that helps.
.container {
padding: 3px 6px;
display: inline-flex;
flex-direction: column;
}
.underline {
height: 2px;
max-width: 0%;
background-color: black;
animation: drawBorder 2s ease forwards;
}
#keyframes drawBorder {
from {
max-width: 0%;
}
to {
max-width: 100%;
}
}
<div class="container">
<h1>Lorem Ipsum</h1>
<div class="underline"></div>
</div>
Use gradient:
div.box {
padding: 3px 6px;
display: inline-block;
position: relative;
background: linear-gradient(#000, #000) bottom/0% 2px no-repeat;
transition:1s all;
}
div.box:hover {
background-size: 100% 2px;
}
<div class="box">
<h1>Lorem Ipsum</h1>
</div>
Related
I want this progress bar to animate only from left to right, starting from text. After animation ends from right to left, it starts animating from right to left, from some point. Note, I need to use the flexbox and width for text.
.table-bars .bar-box .text {
height: 100%;
margin: 0 30px 0 200px;
width: 200px;
text-align:right;
}
.bar-box {
margin-bottom:20px;
}
.table-bars div .progress {
background-color: #0071b9;
border-radius: 20px;
border-right: 13px solid rgb(0, 173, 239);
-webkit-animation: progressBar 2s ease-in-out;
-webkit-animation-fill-mode:both;
-moz-animation: progressBar 2s ease-in-out;
-moz-animation-fill-mode:both;
height: 20px;
}
#-webkit-keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
#-moz-keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
.bar-box {
display: flex;
}
<div class="table-bars">
<div class="bar-box">
<div class="text"><span>TEXT</span></div>
<div class="progress"></div>
</div>
<div class="bar-box">
<div class="text"><span>Another TEXT</span></div>
<div class="progress"></div>
</div>
</div>
You need to either add flex-shrink:0 to avoid the shriking of the text because you are setting width:100%
.table-bars .bar-box .text {
height: 100%;
margin: 0 30px 0 200px;
width: 200px;
text-align: right;
flex-shrink:0;
}
.bar-box {
margin-bottom: 20px;
}
.table-bars div .progress {
background-color: #0071b9;
border-radius: 20px;
border-right: 13px solid rgb(0, 173, 239);
animation: progressBar 2s ease-in-out;
animation-fill-mode: both;
height: 20px;
}
#keyframes progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.bar-box {
display: flex;
}
<div class="table-bars">
<div class="bar-box">
<div class="text"><span>TEXT</span></div>
<div class="progress"></div>
</div>
<div class="bar-box">
<div class="text"><span>Another TEXT</span></div>
<div class="progress"></div>
</div>
</div>
Or animate the flex-grow instead of width:
.table-bars .bar-box .text {
height: 100%;
margin: 0 30px 0 200px;
width: 200px;
text-align: right;
flex-shrink:0;
}
.bar-box {
margin-bottom: 20px;
}
.table-bars div .progress {
background-color: #0071b9;
border-radius: 20px;
border-right: 13px solid rgb(0, 173, 239);
animation: progressBar 2s ease-in-out;
animation-fill-mode: both;
height: 20px;
}
#keyframes progressBar {
0% {
flex-grow: 0;
}
100% {
flex-grow: 1;
}
}
.bar-box {
display: flex;
}
<div class="table-bars">
<div class="bar-box">
<div class="text"><span>TEXT</span></div>
<div class="progress"></div>
</div>
<div class="bar-box">
<div class="text"><span>Another TEXT</span></div>
<div class="progress"></div>
</div>
</div>
Related: Why is a flex item limited to parent size?
I'm trying to do a circle that expands-change color from the center, and i want it to expand it with border-radius: 50%, you'll understand what i'm talking about if you watch the example i made
Checkout the sample i made for better understanding
Thanks for any help
You could run a transition over an inset box-shadow, like so
div {
width: 300px;
height: 300px;
display: flex;
color: #FFF;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #03BF60;
cursor: pointer;
transition: box-shadow .75s 0s, color .5s 0s;
box-shadow: inset 0 0 0 0 #DCEDC8;
}
div p {
color: inherit;
text-align: center;
}
div:hover {
color: #444;
box-shadow: inset 0 0 0 150px #DCEDC8;
}
<div>
<p>
Responsive design. I get this certificate by
learning HTML, CSS, web design, media query plus
animations using keyframes, declaring variables
on css and a lot of CSS components.
</p>
</div>
You could to use Keyframes...
<div class="shape">
<div class="to-animate animate"></div>
</div>
.shape {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.to-animate {
width: 0;
height: 0;
background: blue;
}
.animate {
animation: my-animation 1s forwards;
}
#keyframes my-animation {
to {
width:200px;
height: 200px;
}
}
https://jsfiddle.net/hernangiraldo89/ba3ne675/
Keyframes are a powerful tool, here its documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
I've been coding a very simple "Traffic Light" program and have run into a problem where it doesn't run after the first #keyframes section completes correctly. From my own research online I'm guessing that I would need a transition(?) so that when the first #keyframes is complete, the next one would be run. However my inexperience with this I'm not sure if its whats required here. Essentially is there a "trigger" I'm missing or is it just something obvious I've left out?
Please excuse the rough code. Its does work as I described above
body {
background-color: #4d4d00
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
#red {
position: absolute;
left: 50px;
text-align: center;
padding: 30px;
background-color: #e60000;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: red 4s 1s 3 linear;
}
#amber {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #ff3300;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: amber 4s 1s 3 linear;
}
#green {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #009933;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: green 4s 1s 3 linear;
}
#keyframes red {
from {
background-color: #e60000;
}
to {
background-color: #000000;
}
#keyframes amber {
from {
background-color: #ff3300;
}
to {
background-color: #000000;
}
#keyframes green {
from {
background-color: #009933;
}
to {
background-color: #000000;
}
}
<div class="container">
<div class="row">
<div id="red">
<br>
<br>
<div id="amber">
<br>
<br>
</div>
</div>
</div>
</div>
you may use animation-delay.
here is a short/minimal code example.
.red {
background: red;
}
.orange {
background: orange
}
.green {
background: lime;
}
/* layout */
div {
display: flex;
height: 150px;
width: 50px;
flex-direction: column;
border-radius: 1em;
background: #555;
margin: 1em;
}
b {
flex: 1;
margin: 5px;
border-radius: 50%;
animation: fade 9s steps(2, end) infinite;
box-shadow: 0 0 5px white
}
/* animation */
#keyframes fade {
66%,
100% {
background: gray;
box-shadow: 0 0
}
}
.red {
animation-delay: -12s
}
.orange {
animation-delay: -6s;
}
<div class=trafficLights>
<b class=red></b>
<b class=orange></b>
<b class=green></b>
</div>
here is a codepen to play with : https://codepen.io/gc-nomade/pen/YVWeQq
You have two way to do this
1) is use animation-delay and set an higher delay to elements you would like to animate after.
animation-delay: 1s;
-webkit-animation-delay:1s;
2) trigger an element.addClass("animatedClass"); with the end of a css animation using animationonend jquery function.
$(".animatedElement").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(".animatedElement").addClass("newAnimatedClass");
});
I am using CSS transform and transition properties. When I hover the image, the button shows up as expected over the image. The problem I found now is that when I focus on the image by pressing the TAB key, the image simply disappears and only the button shows.
Html:
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
CSS:
.clearfix{
clear: both;
}section
{
text-align: center;
}
.main{
float:left;
width:30%;
text-align: center;
border:10px solid white;
width:306px;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:focus .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover{
opacity: 0.5;
}
How can I overcome this problem in a way that the same effect happens on FOCUS?
What I'd like to do:
I would like to create a radial menu as shown below, considering all elements in the picture interactive, i.e the image in centre as well as the four quarters around it.
It's important that the solution is cross-browser compatible.
This is just a simple example as the parts dont really have to be quarters, they can be any possible number of parts :
Solutions Tried So Far :
I have tried using CSS3 round div with border , where the border have these images as background, but doesnt really work well, as each element has to be a stand-alone element.
I heard about css-shapes, but I don't know how to use it to create the radial menu.
EDIT:
Maybe there is also a way to add a text caption to each of these images...
Thank you for help!
I made this pen with a css radial menu. The circular menu appears on hover :
Demo : CSS radial menu
The radial shape is made with border radius and the overflow property. The hover animation is handled with CSS transition (scale and oapcity).
For a version with menu titles, see this DEMO
Full Code for the radial menu :
HTML :
<span><span></span></span>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS :
body,html{margin:0;padding:0;height:100%;}
body{background:#E3DFD2;box-shadow: inset 0 0 20vmin 0 #585247;}
.wrap{
position:relative;
width:80vmin; height:80vmin;
margin:0 auto;
background:inherit;
transform:scale(0.2) translatez(0px);
opacity:0;
transition:transform .5s, opacity .5s;
}
a{
position:absolute;
left:0; top:0;
width:47.5%; height:47.5%;
overflow:hidden;
transform:scale(.5) translateZ(0px);
background:#585247;
}
a div{
height:100%;
background-size:cover;
opacity:.5;
transition:opacity .5s;
border-radius:inherit;
}
a:nth-child(1){
border-radius:40vmin 0 0 0;
transform-origin: 110% 110%;
transition:transform .4s .15s;
}
a:nth-child(1) div{
background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
a:nth-child(2){
border-radius:0 40vmin 0 0;
left:52.5%;
transform-origin: -10% 110%;
transition:transform .4s .2s;
}
a:nth-child(2) div{
background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
}
a:nth-child(3){
border-radius:0 0 0 40vmin;
top:52.5%;
transform-origin: 110% -10%;
transition:transform .4s .25s;
}
a:nth-child(3) div{
background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');
}
a:nth-child(4){
border-radius:0 0 40vmin 0;
top:52.5%; left:52.5%;
transform-origin: -10% -10%;
transition:transform .4s .3s;
}
a:nth-child(4) div{
background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');
}
a:nth-child(5){
width:55%;height:55%;
left:22.5%; top:22.5%;
border-radius:50vmin;
box-shadow:0 0 0 5vmin #E3DFD2;
transform:scale(1);
}
a:nth-child(5) div{
background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');
}
span{
position:relative;
display:block;
margin:0 auto;
top:45vmin;
width:10vmin; height:10vmin;
border-radius:100%;
background:#585247;
transform:translateZ(0px);
}
span span{
position:absolute;
width:60%;height:3px;
background:#ACA696;
left:20%; top:50%;
border-radius:0;
}
span span:after, span span:before{
content:'';
position:absolute;
left:0; top:-1.5vmin;
width:100%; height:100%;
background:inherit;
}
span span:after{
top:1.5vmin;
}
span:hover + .wrap, .wrap:hover{
transform:scale(.8) translateZ(0px);
opacity:1;
}
span:hover + .wrap a, .wrap:hover a{
transform:scale(1) translatez(0px);
}
a:hover div{
opacity:1;
transform:translatez(0px);
}
Here's an alternative, less fancy, have to get clever with img opacity + div background-color to preserve the hover.
/* CSS */
* {
box-sizing: border-box;
}
div {
background: white;
}
img {
width: 100%;
-webkit-transition: opacity .2s;
}
div:hover > img {
opacity: .5;
}
.wrap,
.wrap div:first-child{
width: 500px;
height: 500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.wrap div:first-child {
float: none;
z-index: 2;
width: 50%;
height: 50%;
border-radius: 100%;
border: 30px solid white;
}
div div {
float: left;
overflow: hidden;
width: 50%;
height: 50%;
border: 15px solid white;
}
div div:nth-child(2) img {
border-radius: 100% 0 0 0;
}
div div:nth-child(3) img {
border-radius: 0 100% 0 0;
}
div div:nth-child(4) img {
border-radius: 0 0 0 100%;
}
div div:nth-child(5) img{
border-radius: 0 0 100% 0;
}
<!-- HTML -->
<div class="wrap">
<div><img src="http://placehold.it/300x300&text=Center" /></div>
<div><img src="http://placehold.it/300x300&text=Top Left" /></div>
<div><img src="http://placehold.it/300x300&text=Top Right" /></div>
<div><img src="http://placehold.it/300x300&text=Bottom Left" /></div>
<div><img src="http://placehold.it/300x300&text=Bottom Right" /></div>
</div>
Here's a solution if you only needed 'four quarters', rather than an unknown amount:
.wrap {
position: relative;
height: 310px;
width: 310px;
}
.square {
display: inline-block;
height: 150px;
width: 150px;
}
.circle {
position: absolute;
height: 180px;
width: 180px;
top: 50%;
left: 50%;
background: gray;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 10px solid white;
}
.wrap div:hover {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
}
.square:nth-child(1) {
border-radius: 100% 0 0 0;
background: cornflowerblue;
}
.square:nth-child(2) {
border-radius: 0 100% 0 0;
background: tomato;
}
.square:nth-child(3) {
border-radius: 0 0 0 100%;
background: darkorange;
}
.square:nth-child(4) {
border-radius: 0 0 100% 0;
background: green;
}
<div class="wrap">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
I got confused by the other examples here so I tried to simplify them and use container divs that I can put anything into, rather than images. Here is the result if it helps anyone.
/* CSS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #272727;
}
.container { /* for the container */
width: 90vw;
height: 90vmin;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
flex-wrap: wrap;
} /* Basically just a responsive container that stays at the page's center */
.box { /* Applies to the four corner boxes within container */
width: 50%;
height: 50%;
border: 2.5vmin solid #272727; /* The 4 borders between the boxes */
}
.center { /* The fifth box at the center, we'll turn it into a circle */
width: 50vmin;
height: 50vmin;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 100%;
border: 5vmin solid #272727; /* The circular border in the center */
z-index: 2;
}
.inner { /* The content holding div inside each of the 5 blocks */
height: 100%; width: 100%; background-color: gold;
}
.center .inner {border-radius: 100%;}
.inner:hover {
background-color: yellow;
}
/* In case you want all buttons to have rounded corners, try: */
/*.top-left .inner {border-radius: 50vmin 0 0 0;}
.top-right .inner {border-radius: 0 50vmin 0 0;}
.bottom-left .inner {border-radius: 0 0 0 50vmin;}
.bottom-right .inner {border-radius: 0 0 50vmin 0;}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box top-left"><div class="inner"></div></div>
<div class="box top-right"><div class="inner"></div></div>
<div class="box bottom-left"><div class="inner"></div></div>
<div class="box bottom-right"><div class="inner"></div></div>
<div class="center"><div class="inner"></div></div>
</div>
</body>
</html>