I've got these animated divs with a round border with Font Awesome icons in them. What's the best way to vertically align them while keeping them in the middle throughout the transition?
Here's the animation on CodePen
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
Just with simply adding this to your CSS
CSS
.social span{
position: relative;
top: 50%;
transform: translateY(-50%);
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
.social span {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
Add line-height: 80px; to your .social class
.social:hover {
height: 80px;
line-height: 80px;
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
line-height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
line-height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
</a>
<a href="https://twitter.com/" target="_blank">
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
</a>
<a href="https://www.linkedin.com/" target="_blank">
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
</a>
<a href="https://www.github.com/" target="_blank">
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
</a>
<a href="https://www.facebook.com/" target="_blank">
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</a>
</div>
You can use display:table for outer container and display:table-cell and vertical-align:middle for inner element
#facebook, #twitter, #linkedin, #github, #phone {
display:table;
margin:auto
}
.fa {
display:table-cell;
vertical-align:middle
}
irrespective of height it will vertically center the inner content and it is also compatible with older browsers as well http://caniuse.com/#search=vertical-align
body {
background-color: #3498db;
}
.fa {
display:table-cell !important;
vertical-align: middle;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
Related
I thought each table row will move continuously move left to right but its overflowing :( I wanted when "T10" reach the end of the window it come on left :0 and start going to end, and when "T9" reach the end of window it come on left : 0 and start to end of window.... and so on....
td {
height :6vh;
width:20vw;
background-color: red;
animation: flow 1s infinite;
}
#keyframes flow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vw);
}
}
<table>
<tr>
<td class="T1"> </td>
<td class="T2"></td>
<td class="T3"></td>
<td class="T4"></td>
<td class="T5"></td>
<td class="T6"></td>
<td class="T7"></td>
<td class="T8"></td>
<td class="T9"></td>
<td class="T10"></td>
</tr>
</table>
I'm not sure if I understood exactly what you want. But I've added two variants of a ticker that do per-item animation. If you want to build more complex animations I'd recommend using something like https://greensock.com/gsap/. With JS you have so much more control over the timing - which is a pain when doing keyframes in CSS it is quite limited.
.scroll-wrapper {
overflow: hidden;
background: #eee;
max-width: 100%;
height: 30px;
display: flex;
position: relative;
}
.scroll-item {
position: absolute;
top: 0;
left: -25%;
height: 100%;
width: 25%;
padding: 10px;
box-sizing: border-box;
text-align: center;
animation-name: ticker;
animation-duration: 4s;
animation-delay: 0s;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroll-item-alt {
animation-name: ticker-alt;
animation-duration: 4s;
animation-delay: 0s;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.T1 {
animation-delay: 3000ms;
background-color: yellow;
}
.T2 {
animation-delay: 2000ms;
background-color: orange;
}
.T3 {
animation-delay: 1000ms;
background-color: red;
}
.T4 {
background-color: magenta;
}
.T1-alt {
animation-delay: 2400ms;
}
.T2-alt {
animation-delay: 1600ms;
}
.T3-alt {
animation-delay: 800ms;
}
.T4-alt {
animation-delay: 0ms;
}
#keyframes ticker {
0% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(400%, 0, 0);
}
}
#keyframes ticker-alt {
0% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(500%, 0, 0);
}
}
<div class="scroll-wrapper">
<span class="scroll-item T1">T1</span>
<span class="scroll-item T2">T2</span>
<span class="scroll-item T3">T3</span>
<span class="scroll-item T4">T4</span>
</div>
<div class="scroll-wrapper">
<span class="scroll-item scroll-item-alt T1 T1-alt">T1</span>
<span class="scroll-item scroll-item-alt T2 T2-alt">T2</span>
<span class="scroll-item scroll-item-alt T3 T3-alt">T3</span>
<span class="scroll-item scroll-item-alt T4 T4-alt">T4</span>
</div>
I have a bit of animation which works perfectly in chrome but doesn't on safari. Weird isn't it? Ok here's my code:
<header>
<div class="ripple-1"></div>
<div class="ripple-2"></div>
<div class="ripple-3"></div>
<div class="ripple-4"></div>
<div class="ripple-5"></div>
</header>
Ok this doesn't work in Safari and mobile as I said, there's no movement whatsoever.
Also, still and only in Safari and mobile, on safari its become border squere
What am I doing wrong?
here is my css
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
bottom: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate3d(-50%, 50%, 0);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity;
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
transform: translate3d(-50%, 50%, 0) scale(0);
opacity: .33;
}
100%{
transform: translate3d(-50%, 50%, 0) scale(2000);
opacity: 0;
}
}
I tried -webkit-, but didnt work :(
use the below css it will work fine on safari as well.
header{
min-height: 100vh;
background-color: #42A5F5;
position: relative;
overflow: hidden;
}
.ripple-1,
.ripple-2,
.ripple-3,
.ripple-4,
.ripple-5{
height: 1px;
width: 1px;
position: absolute;
left: 50%;
top: 50%;
background: dodgerblue;
border-radius: 50%;
transform: translate(-50%, -50%);
animation-name: ripple;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
will-change: transform, opacity, width;
r
}
.ripple-1{
animation-delay: 0;
}
.ripple-2{
animation-delay: 1s;
}
.ripple-3{
animation-delay: 2s;
}
.ripple-4{
animation-delay: 3s;
}
.ripple-4{
animation-delay: 4s;
}
.ripple-5{
animation-delay: 5s;
}
main{
height: 4000px;
background-color: #f7f7f7;
}
#keyframes ripple{
0%{
opacity: .33;
}
100%{
opacity: 0;
height: 2000px;
width: 2000px;
}
}
I'm getting more into animation property and keyframes. Got this loader thing I'm working on. I'm having a hard time getting to go from right to left with animation-delay and multiple animations approach.
This one dot is supposed to go from left > right, right > left.
Stop there for until the other dots pass back the other direction and start again, stop there until the other dots pass back....
My approach is:
Full solution at jsfiddle
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 1.66667s linear infinite 3.125s, load-through-left 1.66667s linear infinite 3.125s;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>
any suggestions for math improvements, I'm all for it.
EDIT
Final result
Here is an approach with single animation. Let me know if it's a direction for you or may I didn't understand your wish.
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 5s linear infinite;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0%, 20% {
transform: translate(0, 0);
background-color: deepskyblue;
}
50%, 70% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>
In the following code, I want to have the square shadow appear and rotate at the same time, but the display does not change. Any help is very appreciated.
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
It won't work like this because when you have it set to display:none; there's nothing to hover so the hover state never gets fired. You need to use only opacity to hide it rather than display:none;
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity:0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
opacity: 0.2;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't hover a non-displayed element. There are a few solutions here, just as making the shadow a child of the test div.
Or, using a + CSS selector. In either case, the hover listener is on the visible element:
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't animate "Display". If you want to fade in the box, have
display:block;
opacity:0;
and in your animations add
opacity:1;
this will fade in the box as it rotates.
You cannot hover an element not displayed like #shadow (with display:none), but you have to hover #test and apply the css rule to the sibiling next to #test, that is #shadow (using + selector)
#test:hover + #shadow
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow{
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
I have 2 div ("a" and "b") I'm trying when div "a" slide Up and stop, div "b"
slide Up inside div "a".
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUp"> </div>
</div>
Here is my JSFiddle
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
translate3d(0, y%, 0) will only translate the element in Y-axis by y% the height of the element. That is 100% would translate it by 10px (height of the child) and 10% would translate it by 1px. In addition you are positioning the element at the bottom of the parent and hence translating it by 1px (end state) is not going to have any visual effect.
You need to do the following changes to achieve the effect that you are looking for:
Use a different animation for the child element, which will move the element from bottom: 0px to bottom: calc(100% - 10px) (the minus 10px is for the height of the element). The first keyframe at bottom: 0px positions the element at the bottom of the container and then gradually move it to the top of the parent element.
Add an animation-delay to the child element that is equal to the animation-duration of parent element. This is required to make sure that the child element does not start animation before the parent element has reached the top.
Note that since you have border-radius set the to the child for the bottom-left and bottom-right, the element won't look nice once it has reached the top.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
One simple way to overcome the border-radius problem that I have mentioned above would be to do away with the border-radius and let the overflow: hidden setting on the parent take care of it.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>