CSS for Elementor
Pulse Animation
selector {
animation: pulse 1s infinite;
}
selector:hover {
animation-play-state: paused;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
Pulse Animation(sporadically)
selector {
animation: pulse-new 7s ease infinite;
}
@keyframes pulse-new{
0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}
}
CRAZY PULSE
selector {
animation: horizontal-shaking 1s ease infinite;
}
@keyframes horizontal-shaking {
0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}
left/right Animation
selector {
animation: shake 5s infinite;
}
selector: {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
selector:hover {
animation-play-state: paused;}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
Buzz Animation
selector {
animation: buzz 1s infinite;
}
selector:hover {
animation-play-state: paused;
}
@-webkit-keyframes buzz {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
@keyframes buzz {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
Up/down Animation
selector {
animation: UpDown 0.9s linear infinite;
left: 0;
bottom: 0;
font-size: 4em;
cursor: pointer;
animation-timing-function: ease-in-out;
}
selector:hover {
animation-play-state: paused;}
@keyframes UpDown {
0% {
bottom: 0;
}
50% {
bottom: .3em;
}
100% {
bottom: 0;
}
}
float Animation
selector {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
'shake' animation with delay
selector {
animation: shake-animation 4.72s ease infinite;
transform-origin: 50% 50%;
}
.element {
margin: 0 auto;
width: 150px;
height: 150px;
background: red;
}
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
Nút liên hệ
.my-pulsing-circle {
position: relative; /* Required for pseudo-element positioning */
/* Basic styling for your circle if not already applied */
width :80px; /* Example size */
height: 80px; /* Example size */
background-color: #f28d28; /* Example color */
border-radius: 50%;
display: flex; /* For centering content within the circle */
justify-content: center;
align-items: center;
}
.my-pulsing-circle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit; /* Inherit the parent's border-radius */
box-shadow: 0 0 0 0 rgb(242, 141, 40); /* Initial shadow */
animation: pulse-effect 2s infinite cubic-bezier(0.55, 0.46, 0.45, 0.94);
}
@keyframes pulse-effect {
0% {
box-shadow: 0 0 0 0 rgba(242, 141, 40, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(242, 141, 40, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(242, 141, 40, 0);
}
}
