CSS part
@keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
animation-name: swing;
transform-origin: center top 0;
}
.animated {
animation-duration: 2s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
HTML part below with 2 different style pulse and swing
<img class="swing animated infinite" style="max-width:100%;" src="user.jpg">
OR
<img class="pulse animated infinite" style="max-width:100%;" src="user.jpg">