Circle Ripple Effect Animation:Having problem of not getting third circle by using css
1
I have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>html5 css3
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
add a comment |
1
I have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>html5 css3
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
add a comment |
1
1
1
I have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>html5 css3
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
I have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
@keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>html5 css3
html5 css3
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
asked Nov 23 '18 at 21:39
Asiya FatimaAsiya Fatima
639112
639112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>answered Nov 23 '18 at 22:54
UModeLUModeL
16615
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
@AsiyaFatima , I added a property (pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.
– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453208%2fcircle-ripple-effect-animationhaving-problem-of-not-getting-third-circle-by-usi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>answered Nov 23 '18 at 22:54
UModeLUModeL
16615
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
@AsiyaFatima , I added a property (pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.
– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
add a comment |
1
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>answered Nov 23 '18 at 22:54
UModeLUModeL
16615
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
@AsiyaFatima , I added a property (pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.
– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
add a comment |
1
1
1
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>answered Nov 23 '18 at 22:54
UModeLUModeL
16615
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
@keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>answered Nov 23 '18 at 22:54
UModeLUModeL
16615
edited Nov 24 '18 at 13:18
answered Nov 23 '18 at 22:54
UModeLUModeL
16615
answered Nov 23 '18 at 22:54
UModeLUModeL
16615
answered Nov 23 '18 at 22:54
UModeLUModeL
16615
16615
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
@AsiyaFatima , I added a property (pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.
– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
add a comment |
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
@AsiyaFatima , I added a property (pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.
– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
thanks for your effort this is exactly what I wanted but when hovering on image transition are very fast smoothness is not there.
– Asiya Fatima
Nov 24 '18 at 13:12
1
1
@AsiyaFatima , I added a property (
pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.– UModeL
Nov 24 '18 at 13:23
@AsiyaFatima , I added a property (
pointer-events:none;) and the transition became a bit smoother. But, to achieve greater smoothness, you need to experiment with the delays and duration of the animation.– UModeL
Nov 24 '18 at 13:23
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
thanks for your response ok I try for animations.
– Asiya Fatima
Nov 24 '18 at 13:48
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453208%2fcircle-ripple-effect-animationhaving-problem-of-not-getting-third-circle-by-usi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
