CSS animation to pulse section of image
14,457
You can use this example for both. I hope it's helpful to you.
.pulse {
animation: pulse 3s infinite;
margin: 0 auto;
display: table;
margin-top: 50px;
animation-direction: alternate;
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
html,
body {
height: 100%;
background-color: #e74c3c;
}
<img src="https://d78fikflryjgj.cloudfront.net/images/50b4ebc64391dc394a38e73aed57f0e2/header-logo.png" alt="" class="pulse" />
Related videos on Youtube
Author by
Penalse
Updated on June 04, 2022Comments
-
Penalse almost 2 years
I'm using CSS animation on a simple image.
I want the pulse animation only to target part of the image.
How I can make that pulse animation so that only the text "Trello" changes opacity?Here is my code:
.element { /*animation-delay: 2s;*/ animation: pulse 3s infinite; margin: 0 auto; display: table; margin-top: 50px; animation-direction: alternate; } @keyframes pulse { 0% { opacity: 1; } 100% { opacity: 0.3; } } html, body { height: 100%; background-color: #e74c3c; }
<img src="https://d78fikflryjgj.cloudfront.net/images/50b4ebc64391dc394a38e73aed57f0e2/header-logo.png" alt="" class="element" />
-
Taylor Foster over 7 yearsIf your trying to make the 'Trello' pulse and not the icon next to it, you are going to need to use two separate images and just throw the pulse animation on the image with the text.
-