I have 4 square divs absolute positioned in each corner on the page. I need to animate them to ease into the center to form a circle. I am having a rough time trying to figure out how you would move them diagonally to the center. I have the code below for my html and css. So far I have them all the colors they are suppose to be and I have them set to transition with ease into a border-radius of 50% for one side on each. That way when they move diagonally to the center they can join together to eventually form into a circle. The main issue is just figuring out how to have them ease diagonally into the center. (I am only aloud to use css for this.)I also have what I have tried to accomplish this with in comments in the css code.
<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
CSS
/* Layout */
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
#keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right ease 4s;
/* transition: translate 4s; */
/* transform: translate(-50%,-50%); */
}
#keyframes squareOne {
to {
border-bottom-right-radius: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left ease 0.5s;
}
#keyframes squareTwo {
to {
border-bottom-left-radius: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right ease 0.5s;
}
#keyframes squareThree {
to {
border-top-right-radius: 50%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius ease 5s;
}
#keyframes squareFour {
to {
border-top-left-radius: 50%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}
Is this what you are looking to accomplish? :)
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
#keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right, top, left ease 4s;
/* transition: translate 4s; */
}
#keyframes squareOne {
to {
border-bottom-right-radius: 100%;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left, top, right ease 0.5s;
}
#keyframes squareTwo {
to {
border-bottom-left-radius: 100%;
top: 50%;
right: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right, bottom, left ease 0.5s;
}
#keyframes squareThree {
to {
bottom: 50%;
left: 50%;
border-top-right-radius: 100%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius, bottom, right ease 5s;
}
#keyframes squareFour {
to {
bottom: 50%;
right: 50%;
border-top-left-radius: 100%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}
<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
This is the CSS I wound up with to get the results I needed. Hopefully we are/were able to help anyone with the same or similar issue now or even in the future.
/*Universal*/
.square_one,
.square_two,
.square_three,
.square_four {
height: 100px;
width: 100px;
}
.square_one:hover,
.square_two:hover,
.square_three:hover,
.square_four:hover {
transition: border 0.25s linear;
border: 2px solid white;
}
/*Individual*/
.square_one {
position: absolute;
top: 0;
left: 0;
background: coral;
animation: circle1 3s linear 1 forwards;
}
.square_two {
position: absolute;
top: 0;
right: 0;
background: lightblue;
animation: circle2 3s linear 1 forwards;
}
.square_three {
position: absolute;
left: 0;
bottom: 0;
background: lightgreen;
animation: circle3 3s linear 1 forwards;
}
.square_four {
position: absolute;
right: 0;
bottom: 0;
background: lightgoldenrodyellow;
animation: circle4 3s linear 1 forwards;
}
/*Animation*/
#keyframes circle1 {
0% {
position: absolute;
}
100% {
position: fixed;
top: 50%;
left: 50%;
background: black;
border-radius: 0 0 100px 0;
}
}
#keyframes circle2 {
0% {
position: absolute;
}
100% {
position: fixed;
top: 50%;
right: 50%;
background: black;
border-radius: 0 0 0 100px;
}
}
#keyframes circle3 {
0% {
position: absolute;
}
100% {
position: fixed;
bottom: 50%;
left: 50%;
background: black;
border-radius: 0 100px 0 0;
}
}
#keyframes circle4 {
0% {
position: absolute;
}
100% {
position: fixed;
bottom: 50%;
right: 50%;
background: black;
border-radius: 100px 0 0 0;
}
}
Related
Loading icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. could you please confirm what we can change from our end.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
please find the below HTML and Js code for reference. other animation text is for fade out in above css3 defined - delay. css3 code shared above for your reference. i have tried with above approach but sorry it is not working.
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>
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 been trying all the morning to make this more smoother:
http://codepen.io/alexrts/pen/jbNrXo
-webkit-animation: pulse 1.4s ease-out;
-moz-animation: pulse 1.4s ease-out;
animation: pulse 1.4s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
As you can see, it looks a little bit robotic.
Does anybody knows if there's a way to do it without javascript?
Best,
Alex
You should make the easing linear
html {
background: #fff;
overflow: hidden;
font-family: Helvetica, Arial;
font-weight: 600;
font-size: 16px;
}
.live-cta {
position: absolute;
top: 45%;
left: 50%;
margin-left: -50px;
}
.live-icon {
position: relative;
width: 40px;
height: 40px;
float: left;
}
.live-text {
position: relative;
float: left;
margin: 12px 0 0 0;
color: #007aff;
}
.live-arrow {
background-image: url("http://s18.postimg.org/u8099c1c5/live_arrow.png");
background-size: 40px 40px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.live-pulse-min {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 10px;
width: 10px;
position: absolute;
top: 11px;
left: 11px;
-webkit-animation: pulse 1.4s linear;
-moz-animation: pulse 1.4s linear;
animation: pulse 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
.live-pulse-max {
border: 4px solid #007aff;
background: transparent;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 28px;
width: 28px;
position: absolute;
top: 2px;
left: 2px;
-webkit-animation: pulse2 1.4s linear;
-moz-animation: pulse2 1.4s linear;
animation: pulse2 1.4s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 1;
opacity: 0;
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
#-webkit-keyframes "pulse2" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
<div class="live-cta">
<div class="live-icon">
<div class="live-arrow"></div>
<div class="live-pulse-min"></div>
<div class="live-pulse-max"></div>
</div>
<div class="live-text">LIVE</dive>
</div>
Try to specify a linear easing by adding this line of css to your specified animations:
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
I edited your code here.
I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free.
JSBin: http://jsbin.com/julor/2/edit
HTML:
<div class="ripple"></div>
CSS:
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
&:after {
-webkit-animation-name: outerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
}
#-webkit-keyframes innerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 200px;
width: 200px;
opacity: 0;
}
}
#-webkit-keyframes ripple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 300px;
width: 300px;
opacity: 0;
}
}
#-webkit-keyframes outerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 340px;
width: 340px;
opacity: 0;
}
}
Adding a frame in between a little earlier than at 99% made the flickering disappear on Safari! (Safari 8 OS X)
#-webkit-keyframes innerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 200px; width: 200px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes ripple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 300px; width: 300px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes outerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 340px; width: 340px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
Html5:
<div id="slideshow">
<div id='animate-area'>
</div>
</div>
Css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 145px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('../img/banner.png');
animation: animatedBackground 40s 5s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
JSfiddle:
jsfiddle.net/cz04c4nx/1
Using this image, I need show like, http://jsfiddle.net/5pVr4/6/. I tried, but for my particular image url('../img/banner.png') when run in localhost, can't able to get.
I think i solved your problem. You can use this code and it may be help you.I edited that code which you can make similar animate background image.
CSS Code:
#-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-550px);
}
}
#content {
height: 100px;
text-align: center;
font-size: 26px;
color: white;
position: relative;
overflow: hidden;
}
.bg{
position: absolute;
left: 0;
right: -550px;
top: 0;
bottom: 0;
background: url(http://s30.postimg.org/qnju89rkx/banner.png) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
Live Working Demo