Menu
Problem
Trying to get a specific animation where there are two rings that ripple/radiate from a shape on an image. I cant quite find that exact animation
Codepen Link
This is what I have so far
This is what I have in mind Its a crude drawing but it gives you an idea. I want rings rippling same as in my codepen around the leaf circle, instead of the whole circle. it would stop the animation on hover and circle would expand with text inside.
Code
HTML
<div id="tree-wrapper">
<img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="ripple"></div>
<div class="circle-top-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Training</u><br />Personal, Corporate
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-top-right" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Consulting</u><br />Project, Organization
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
<a class href="http://veddma.net/our-services/accreditation">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Accreditation</u><br />Professional Management Architects
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Tools</u><br />
</p>
<span></span>
</div>
</div>
</div>
</a>
</div>
CSS
* {
box-sizing: border-box;
}
#tree-wrapper{
position: relative;
width: 668px;
height: 551px;
margin: 0 auto;
}
#tree-wrapper p{
margin: 0;
padding: 0;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 75px;
}
.circle-top-left,
.circle-top-right,
.circle-bot-left,
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
width: 58px;
height: 58px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0;
text-align: center;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
width: 200px;
height: 200px;
padding: 0.6em 2.5em;
color: transparent;
}
.circle-top-left {
top: 23.9%;
left: 11.2%;
}
.circle-top-right {
top: 13%;
left: 54.5%;
}
.circle-bot-left {
top: 73.8%;
left: 0;
}
.circle-bot-right {
top: 53.5%;
left: 91.2%;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
transform: translate(-60px, -60px);
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
/*@import url(http://fonts.googleapis.com/css?family=Norican);*/
@-webkit-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 200px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}
}
@-moz-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
/* 50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.5);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
@-moz-keyframes rip-lg
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 240px 200px rgba(178,3,18, 0.5),
0 0 210px 210px transparent,
}
/* 75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
.ripple {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
h1 {
/*display:block;*/
/*font-size:50px;
font-family: 'Norican', cursive;*/
/*color: white;*/
/*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
/*background-color: #45C2C5;*/
/*background-color:#fa0;*/
/*border-radius: 50%;*/
/*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
/*position: absolute;*/
/* margin:-20px 0 0 -20px;*/
/* text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/
/* transition: all 5s ease-in-out;*/
}
html:hover h1 {
/*transform: translateY(-200px);*/
}
.ripple,.ripple:before,.ripple:after {
display:block;
border-radius:2px;
width:2px;
height:2px;
-webkit-animation:rip 4s infinite;
-moz-animation:rip 2s infinite;
}
.ripple {
position:absolute;
z-index:-1;
top: 28%;
left: 15%;
}
.ripple:before,.ripple:after {
content:'';
position:absolute;
}
.ripple:before {-webkit-animation-delay: 4s;-moz-animation-delay: 2s;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;}
457
CSS border animation is useful for giving a border image or container element a unique style. To make a website's user interface (UI) more attractive, use a CSS border animation design. CSS border animation is useful for giving a border image or container element a unique style.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
Yes, you can animate z-index ! It's not visually apparent in this demo, but seeing the interpolated values go from 1 to 5 confirms it.
You can use an animation like you are trying to use but instead of using box-shadow on the :before and :after pseudo-elements use a simple border.
Below is quick example; just hover on the circle to stop it. (Do note that it does not have all prefixed properties a la -webkit-, etc)
.circle {
height:100px;
width:100px;
border-radius:50%;
background-color:red;
position:relative;
top:100px;
left:300px;
-webkit-transition:height .25s ease, width .25s ease;
transition:height .25s ease, width .25s ease;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.circle:hover{
height:150px;
width:150px;
}
.circle:before,
.circle:after {
content:'';
display:block;
position:absolute;
top:0; right:0; bottom:0; left:0;
border-radius:50%;
border:1px solid red;
}
.circle:before {
-webkit-animation: ripple 2s linear infinite;
animation: ripple 2s linear infinite;
}
.circle:after {
-webkit-animation: ripple 2s linear 1s infinite;
animation: ripple 2s linear 1s infinite;
}
.circle:hover:before,
.circle:hover:after {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes ripple{
0% {-webkit-transform:scale(1); }
75% {-webkit-transform:scale(1.75); opacity:1;}
100% {-webkit-transform:scale(2); opacity:0;}
}
@keyframes ripple{
0% {transform:scale(1); }
75% {transform:scale(1.75); opacity:1;}
100% {transform:scale(2); opacity:0;}
}<div class="circle"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
