HTML
<img src="https://ik.imagekit.io/ikmedia/css-image-effects/new-york_lbAbZZKZG.jpg" alt="new york" />
</br>
<p class="vibrating-text"> dfdf dfd ddfd df</p>
CSS
img {
width: 300px;
}
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: vibrate 0.1s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes vibrate {
0% { transform: rotate(0deg); }
10% { transform: rotate(-1deg); }
20% { transform: rotate(1deg); }
30% { transform: rotate(0deg); }
40% { transform: rotate(1deg); }
50% { transform: rotate(-1deg); }
60% { transform: rotate(0deg); }
70% { transform: rotate(-1deg); }
80% { transform: rotate(1deg); }
90% { transform: rotate(0deg); }
100% { transform: rotate(-1deg); }
}
OR
@keyframes vibratetext {
0% { transform: translate(0, 0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(-1px, -1px); }
60% { transform: translate(1px, 1px); }
80% { transform: translate(1px, -1px); }
100% { transform: translate(0, 0); }
}
.vibrating-text:hover {
animation: vibratetext 0.1s linear infinite;
display: inline-block; /* Essential for transform to work on inline elements */
}
<!DOCTYPE html>
<html>
<head>
<style>
.blinking-text {
font-size: 30px;
/* Binds the 'color-change' animation to this element */
animation: color-change 1s infinite alternate;
}
/* Defines the animation sequence */
@keyframes color-change {
0% {
color: red; /* Start color */
}
50% {
color: blue; /* Middle color */
}
100% {
color: green; /* End color */
}
}
</style>
</head>
<body>
<p class="blinking-text">This is a paragraph. Font is italic, in small-caps and bold, the font size is 15 pixels, the line height is 30 pixels, and the font family is Georgia.</p>
</body>
</html>
==============================
Blink
<!DOCTYPE html>
<html>
<head>
<style>
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1>The font Shorthand Property</h1>
<div class="blink_me">BLINK ME</div>
</body>
</html>
ref:- https://dev.to/akhilarjun/four-subtle-text-effects-to-spice-up-your-web-site-27e7
https://unused-css.com/blog/css-shake-animation/
https://codewithandrea.com/articles/shake-text-effect-flutter/
https://chromewebstore.google.com/detail/wiggle/ckplmbnbflgjohojekkanjffeoaaeodj?hl=en
https://codepen.io/imagekit_io/pen/OJxapRm
https://codemyui.com/shaking-text-animation/
(wiggle)
chrome://settings/system
enable or disable hardware acceleration
No comments:
Post a Comment