I have applied this html code to a Text Module and the Text Module turn out in 5 Columns.
I applied the CSS animation and the animation is working fine in Editor but in the website not working on the Post when in the visitor mode.
When i edit the Post in Drag and Drop editor then the Code is working fine when i hover on the Box it animate but not in Visitor mode when i open the page in another browser as Visitor.The post is showing, Columns is showing, but no animation.
.bg-box {
height: 200px;
width: 100%;
position: relative;
background: transparent;
}
.sol-1 {
top: 8px;
left: 0px;
border: 1px solid black;
}
.sol-2 {
top: 8px;
left: 100px;
border: 1px solid black;
}
.sol-3 {
top: 8px;
left: 200px;
border: 1px solid black;
}
.sol-4 {
top: 8px;
left: 300px;
border: 1px solid black;
}
.sol-5 {
top: 8px;
left: 400px;
border: 1px solid black;
}
[class^="sol"] {
position: absolute;
height: 100px;
width: 100px;
z-index: 1;
}
.sol-1:hover ~ .bg-box {
-webkit-animation-name: background-sol-1 !important;
-webkit-animation-duration: 2s !important;
-webkit-animation-fill-mode: forwards !important;
}
.sol-2:hover ~ .bg-box {
-webkit-animation-name: background-sol-2;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
}
.sol-3:hover ~ .bg-box {
-webkit-animation-name: background-sol-3;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.sol-4:hover ~ .bg-box {
-webkit-animation-name: background-sol-4;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.sol-5:hover ~ .bg-box {
-webkit-animation-name: background-sol-5;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes background-sol-1 {
0% {
background: transparent;
}
100% {
background: black;
}
}
#-webkit-keyframes background-sol-2 {
0% {
background-color: transparent;
}
100% {
background: red;
}
}
#-webkit-keyframes background-sol-3 {
0% {
background: transparent;
}
100% {
background: blue;;
}
}
#-webkit-keyframes background-sol-4 {
0% {
background: transparent;
}
100% {
background: green;;
}
}
#-webkit-keyframes background-sol-5 {
0% {
background: transparent;
}
100% {
background: pink;;
}
}
<html>
<body>
<div class="sol-1"></div>
<div class="sol-2"></div>
<div class="sol-3"></div>
<div class="sol-4"></div>
<div class="sol-5"></div>
<div class="bg-box">
</div>
Related
I have implemented a loading spinning icon which is overlaid on the page.
It looks fine but when I try to darken the entire page by using
background-color: rgba(0, 0, 0, 0.4);
in the .spinner-container element, the bands of the loading element dim also...
See these pictures...
I would like to keep these bright vibrant colors on top of the dimmed gray background.
Any ideas what I can implement to change this?
.spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
}
#keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.three-dots span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.three-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.three-dots span:nth-child(3) {
animation-delay: 0.4s;
}
.spinner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.spinner-sector {
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
border: 15px solid transparent;
mix-blend-mode: overlay;
}
.spinner-text {
font-size: 2em;
}
.spinner-sector-blue {
animation: rotate 2s ease-out infinite;
border-top: 15px solid lightblue;
}
.spinner-sector-red {
animation: rotate 2.5s ease-in infinite;
border-top: 15px solid lightcoral;
}
.spinner-sector-green {
animation: rotate 1.5s ease-in-out infinite;
border-top: 15px solid lightgreen;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loading-opacity {
0%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0.5;
}
50% {
opacity: 0.1;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="spinner-container">
<div class="spinner">
<div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
<div class="spinner-sector spinner-sector-red"></div>
<div class="spinner-sector spinner-sector-blue"></div>
<div class="spinner-sector spinner-sector-green"></div>
</div>
</div>
</body>
</html>
You are using mix-blend-mode: overlay; (documentation) on your .spinner-sector elements, which is blending the vibrant colours with the darkened page below.
Removing that gives you:
.spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
}
#keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.three-dots span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.three-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.three-dots span:nth-child(3) {
animation-delay: 0.4s;
}
.spinner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.spinner-sector {
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
border: 15px solid transparent;
}
.spinner-text {
font-size: 2em;
}
.spinner-sector-blue {
animation: rotate 2s ease-out infinite;
border-top: 15px solid lightblue;
}
.spinner-sector-red {
animation: rotate 2.5s ease-in infinite;
border-top: 15px solid lightcoral;
}
.spinner-sector-green {
animation: rotate 1.5s ease-in-out infinite;
border-top: 15px solid lightgreen;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loading-opacity {
0%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0.5;
}
50% {
opacity: 0.1;
}
}
<div class="spinner-container">
<div class="spinner">
<div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
<div class="spinner-sector spinner-sector-red"></div>
<div class="spinner-sector spinner-sector-blue"></div>
<div class="spinner-sector spinner-sector-green"></div>
</div>
</div>
Alternatively, to keep the blending effect, you could switch to an option that doesn't darken the loading animation, e.g. hard-light
.spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
}
#keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.three-dots span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.three-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.three-dots span:nth-child(3) {
animation-delay: 0.4s;
}
.spinner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.spinner-sector {
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
border: 15px solid transparent;
mix-blend-mode: hard-light;
}
.spinner-text {
font-size: 2em;
}
.spinner-sector-blue {
animation: rotate 2s ease-out infinite;
border-top: 15px solid lightblue;
}
.spinner-sector-red {
animation: rotate 2.5s ease-in infinite;
border-top: 15px solid lightcoral;
}
.spinner-sector-green {
animation: rotate 1.5s ease-in-out infinite;
border-top: 15px solid lightgreen;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loading-opacity {
0%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0.5;
}
50% {
opacity: 0.1;
}
}
<div class="spinner-container">
<div class="spinner">
<div class="spinner-text three-dots">Loading<span>.</span><span>.</span><span>.</span></div>
<div class="spinner-sector spinner-sector-red"></div>
<div class="spinner-sector spinner-sector-blue"></div>
<div class="spinner-sector spinner-sector-green"></div>
</div>
</div>
I created an animated arrow set in one icon. So far so good. However, it suddenly shifts to the left for a moment during the sequence which makes the whole animation shaky.
Here is the pen to see the animation in action:
https://codepen.io/erwinvanlun/pen/VxWQQy?editors=1100
Below the code. Any clue what is going on?
HTML:
<div style="font-size: 150px; line-height: 100%;
color: darkgrey;">
<i class="icon-fold"></i></div>
CSS:
i.icon-fold {
position: relative;
display: inline-block;
font-style: normal;
box-sizing: border-box;
}
i.icon-fold {
vertical-align: bottom;
margin: .1em .2em 0 .2em;
border: .3em solid transparent;
border-bottom-color: currentColor;
border-width: 0;
animation: scale 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:before, i.icon-fold:after {
content: "";
position: absolute;
box-sizing: border-box;
left: -.3em;
border: .3em solid transparent;
border-bottom-color: currentColor;
}
i.icon-fold:before {
top: -.9em;
transition: opacity 5s linear;
animation: fade 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:after {
top: -.6em;
}
i.icon-fold:hover, {
animation-play-state: running;
&:after, &:before {
// transform:translateY(-.1em);
animation-play-state: running;
}
}
#keyframes fade {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
}
#keyframes scale {
0% {
left: .3em;
border-width: 0;
}
99% {
left: 0em;
border-width: .3em;
}
}
In keyframes please use 100% instead of 99%
#keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes scale {
0% {
left: .3em;
border-width: 0;
}
100% {
left: 0em;
border-width: .3em;
}
}
I'm trying to use a keyframe that will not return to first position, I mean if I have a transition from left to right, to stay right not return to the left side.
Code
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
100% {
background-color: yellow;
left: 200px;
top: 0px;
}
}
/* Standard syntax */
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
100% {
background-color: yellow;
left: 200px;
top: 0px;
}
}
<div></div>
You just need to add animation-fill-mode: forwards; to the div.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:yellow; left:200px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:yellow; left:200px; top:0px;}
}
<div></div>
You just need to add 'animation-iteration-count: 1' it will work single time or if you want to take it in the loop then can try 'animation-iteration-count: infinite' into the div.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1; /*value can be infinite if you want to it in loop */
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50%{
background-color: yellow;
left: 200px;
top: 0px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
/* Standard syntax */
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50%{
background-color: yellow;
left: 200px;
top: 0px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<div></div>
I have a set of icons that transition from the center of the page to a set point, and then remain there. What I want to do is set them to transition to have a thicker border and scale to 130x130px whenever I mouse over one of them, but only the initial animation occurs
CSS:
.iconborder {
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
}
.iconborder:hover {animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;}
#keyframes icongrow {
0% {
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
}
}
#FTPSlideOut
{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;
animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes FTPSlideOut {
0% {
transform: translate(0px, 0px);
visibility: visible;
}
100% {
transform: translate(-300px, -150px);
visibility: visible;
}
}
And HTML:
<body style="background-color:#D4D4D4;height:100%;width:100%">
<img id="SlideUp" class="dropshadow" src="picCenterDotFinalwText.png">
<img id="FTPSlideOut" class="dropshadow iconborder" src="FTP.png">
<img id="PicturesSlideOut" class="dropshadow iconborder" src="Pictures.png">
<img id="VideosSlideOut" class="dropshadow iconborder" src="Videos.png">
<img id="MusicSlideOut" class="dropshadow iconborder" src="Music.png">
<img id="DocumentsSlideOut" class="dropshadow iconborder" src="Documents.png">
<img id="EmailSlideOut" class="dropshadow iconborder" src="Email.png">
</body>
Any clues?
Im not sure why are you using keyframes for just a simple hover animation.
You can use css3 transitions just for that animation
see demo
#-webkit-keyframes icongrow {
0%{
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
border-color:#ccc;
}
}
.iconborder{
text-align:center;
border: solid 5px #fff; /* use shorthand */
border-radius: 100em;
/* customize */
-webkit-transition : border 0.2s linear;
/*-webkit-animation-duration: 0.2s;*/
}
.iconborder:hover{
border: 10px solid #fff;
width: 130px;
height: 130px;
cursor:pointer;
/* -webkit-animation-name: icongrow;
-webkit-animation-fill-mode: forwards;*/
}
#-webkit-keyframes FTPSlideOutAnimate {
0%{
opacity:0;
-webkit-transform: translate(0,0);
}
100% {
opacity:1;
-webkit-transform: translate(-300px, -150px);
}
}
#FTPSlideOut{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
/* customize */
opacity:0.1;
-webkit-transition: -webkit-transform 1s ease-in,
opacity 0.5s linear;
}
#FTPSlideOut:hover{
-webkit-transform: translate(-300px, -150px);
opacity:1;
/*-webkit-animation: FTPSlideOutAnimate 0.2s linear;
-webkit-animation-fill-mode: forwards; */
}
http://jsfiddle.net/phcba/2/
in that fiddle you can uncomment the keyframes properties just to check and see how bad the animation it was when using Keyframes if not done right for your hover effect
Also im not sure how the #FTPSlideOut is position and displayed on your site, so I made it barely visible in that demo. Ive used Opacity instead of visibilty, you'll need to modify it in your case.
For more info about CSS3 transtions:
http://css-tricks.com/almanac/properties/t/transition/
cheers
Just put your animation in the class pseudo selector with the hover in it? like this
.clickMes {
color: white;
font-size: 17pt;
text-decoration: none;
}
.clickMes:active {
color: cyan;
}
.clickMes:hover {
animation: clickmes 1.3s infinite;
}
#keyframes clickmes {
0% {
background-color: none;
}
50% {
background-color: cyan;
}
100% {
background-color: none;
}
}
I know it is possible to draw and animate arcs in SVG and canvas. However, is it possible in CSS?
I have created an arc using the following method:
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
}
But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?
Here is working demo with minimum of hard-coded variables. This works based on animated circle halves:
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
background-color: lime;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
Also the same look as iConnor's answer but doesn't have drawback of hardcoded background-color:
*,
*:before,
*:after {
box-sizing: border-box;
}
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
border: 10px solid #00507c;
border-right-color: transparent;
background-color: #0087cf;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
If you need sole CSS3, then you can set a width+height, set border-radius to 100%, disable the extra borders (use only 1 or 2) and add some good pixels to it.
Then you can animate using animate: time animation ease timingFunction;
Declare the animation itself using #-prefix-keyframes { . . . } (Eh yea, looks like most browser engines require prefix for this one, chrome does :S)
I think I might have something close to what you mean:
.qLoader2 {
border: 4px solid blue;
width: 10vw;
height: 10vw;
width: 72px;
height: 72px;
position: absolute;
top: 12vh;
right: 45vw;
left: 45vw;
background: white;
opacity: 0.45;
border-right: none;
border-top: none;
border-left: none;
z-index: 2000;
background-color: transparent;
border-radius: 100%;
transform: rotateZ(0);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* #-moz-keyframes spin { . . . } */
/* #-ms-keyframes spin { . . . } */
/* #-o-keyframes spin { . . . } */
#-webkit-keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
#keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
<div class="qLoader2"></div>
On JSFiddle
Feel free to use and modify.
Alternatively you could check something with SVG it's fairly decent as well and supported by most nowadays browsers.
EDIT: Using two arcs, you can have the animation draw cleanly from left-to-right AND have the background show through:
http://jsfiddle.net/sPv4A/6/
Vendor prefixes not included for CSS:
.arcContain {
width: 150px;
height: 400px;
position: relative;
margin: 20px;
}
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border: 2px solid black;
border-bottom: 2px solid transparent;
position: absolute;
top: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.archideLeft .arc {
top: auto;
bottom: 0;
right: auto;
left: 0;
}
.archide {
width: 50%;
height: 0%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
animation: appear 1.2s ease-in 1.2s forwards;
}
.archideLeft {
top: auto;
bottom: 0;
right: auto;
left: 0;
animation: appear 1.2s ease-out forwards;
}
#keyframes appear {
to {
height: 100%;
}
}
<div class="arcContain">
<div class="archide archideLeft">
<div class="arc"></div>
</div>
<div class="archide">
<div class="arc"></div>
</div>
</div>
OLD ANSWER: Maybe using two child divs to cover it up, and then have them shrink away to reveal it:
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.arcInner {
background: white;
height: 402px;
width: 77px;
position: absolute;
}
.arcLeft {
top: -2px;
left: -2px;
-webkit-transition: height 2s linear;
-moz-transition: height 2s linear;
-ms-transition: height 2s linear;
-o-transition: height 2s linear;
transition: height 2s linear;
}
.arcRight {
bottom: 0;
right: -2px;
-webkit-transition: height 2s 2s linear;
-moz-transition: height 2s 2s linear;
-ms-transition: height 2s 2s linear;
-o-transition: height 2s 2s linear;
transition: height 2s 2s linear;
}
.appear .arcInner {
height: 0;
}
<div class="arc">
<div class="arcInner arcLeft"></div>
<div class="arcInner arcRight"></div>
</div>
As Per Chris B's suggestion on the original question, the answer is to contain the arc in another div and then animate the width of the container:
http://jsfiddle.net/AZb3X/
CSS:
body{
background:orange;
}
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
float:left;
}
.hider{
width:0px;
overflow:hidden;
-webkit-animation:unhide 12s;
}
#-webkit-keyframes unhide{
100%{width:400px}
}
HTML:
<div class='hider'>
<div class="arc"></div>
</div>
I may be a little late, but I think using two "hiders" and translating one up and one down will look a little better.
Working Example
<div class="wrap">
<div class="arc"></div>
</div>
body {
background:orange;
}
.wrap {
position:absolute;
height:400px;
width:170px;
overflow: hidden;
}
.arc {
position:absolute;
width:150px;
height:400px;
margin:10px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid transparent;
}
.arc:before {
content:"";
position:absolute;
left:-1px;
top:-2px;
background: orange;
width:76px;
height:375px;
animation:unhide1 5s linear both;
}
.arc:after {
content:"";
position:absolute;
left:75px;
top:-2px;
background: orange;
float: right;
width:76px;
height:375px;
animation: unhide2 5s linear 5s both;
}
#keyframes unhide1 {
100% {
transform: translatey(-375px);
}
}
#keyframes unhide2 {
100% {
transform: translatey(375px);
}
}