Tạo hiệu ứng chuyển động trong CSS3 cho phép chúng ta tạo ra các hiệu ứng mà không cần phải sử dụng Javascript hay Flash. Animation giúp Website chúng ta trở nên chuyên nghiệp mà bắt mắt với người dùng hơn. Trong bài viết này sẽ góp nhặt đến các bạn những hiệu ứng nhỏ gọn cho một thẻ div nhờ sử dụng HTML5 và CSS3.
Gắn css trong bài viết

Tạo hiệu ứng ánh sáng khi hover vào hình ảnh trong Flatsome

Đoạn CSS sau theo đường dẫn: Giao diện > Tuỳ biến > Add custom CSS
.product-small .box-image:hover::before{
-webkit-animation:shine .75s;animation:shine .75s
}
@-webkit-keyframes shine{
100%{left:125%}
}
@keyframes shine{
100%{left:125%}
}
.product-small .box-image::before{
position:absolute;
top:0;
left:-75%;
z-index:2;
display:block;
content:'';
width:50%;
height:100%;
background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}

Thu gọn tiêu đề sản phẩm thành 2 dòng

p.name.product-title a {
padding-top: 5px;
text-align: center;
color: #000;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Lưu ý: Sửa các thông tin sau theo ý của bạn

• -webkit-line-clamp: 2; là số dòng các bạn muốn cắt, nếu chỉ muốn cắt thành 1 dòng thì thay bằng số 1,..
• font-weight: là độ dày của chữ, các bạn muốn nó thanh mảnh hơn thì giảm còn 600

Chia Form thành 2 cột & Chèn icon vào Contact Form 7

Đoạn HTML chèn vào tab “Nội dung Form”

<div class="form-contact-twocol">
   <div id="info-left">
   <p>
[text]

<i id=”icon-form” class=”icon-user”></i></p>
</div>
<div id=”info-right”>
<p>[tel* your-number placeholder “Di động *”]<i id=”icon-form” class=”icon-phone”></i></p>
</div>
</div>
<p>[email your-email placeholder “Email”]<i id=”icon-form” class=”icon-envelop”></i></p>
<p>

[text]

<i id=”icon-form” class=”icon-pen-alt-fill”></i></p>
<p>[textarea your-message placeholder “Nội dung email…”]<i id=”icon-form” class=”icon-chat”></i></p>
<center>[submit class:button primary “Gửi Đi”]</center>

 Đoạn CSS chia cột và chèn icon vào Form, các bạn dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme Flatsome.

/*-- chia cột Form --*/#info-left {
    width: 49%;
    float: left;
    margin-right:2%;
}
#info-right {
    width: 49%;
    float: right;
}
.form-contact-twocol:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
.form-contact-twocol {
    display:block;
}
/*-- Chèn icons lên Form --*/.wpcf7 p{ position: relative; }
#icon-form{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 8px;
  right: 10px;
}

Read More
.btn-11 {
border: none;
background: rgb(4 34 145);
background: linear-gradient(0deg,rgb(7 35 124)0%,rgb(0 100 251)100%);
color: #fff;
overflow: hidden;
}
.btn-11:hover {
text-decoration: none;
color: #fff;
}
.btn-11:before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
opacity: .7;
}
.btn-11:active{
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
https://codepen.io/yuhomyan/pen/OJMejWJ
https://codepen.io/derekmorash/pen/XddZJY

https://www.laixe.xyz/2020/07/tao-hieu-ung-rung-lac-khi-re-chuot-vao-anh.html

img.shake-image:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

https://www.niemvuilaptrinh.com/article/Cach-Tao-Hieu-Ung-Zoom-Effect-Cho-Trang-Web2020
https://codepen.io/haycuoilennao19/pen/NWNbdQJ
https://dev.to/vaishali1192/create-zoom-in-zoom-out-animation-effect-in-css-5hmg


.zoom-in-out {
margin: 24px;
width: 40%;
animation: zoom-in-zoom-out 4s ease-out infinite;
}
.zoom-in-zoom-out {
margin: 24px;
width: 50px;
height: 50px;
background: green;
animation: zoom-in-zoom-out 2s ease-out infinite;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}

https://blog.hubspot.com/website/css-animation-examples https://blog.hubspot.com/website/css-animation

Hiệu ứng 3 box xoay vòng

https://dev.to/pixmy/create-waves-with-pure-css-5gp

https://codepen.io/Pixmy/pen/qaYQoV


.boxwave {
position: fixed;
top: 0;
transform: rotate(80deg);
left: 0;
}

.wave {
position: fixed;
top: 0;
left: 0;
opacity: .4;
position: absolute;
top: 3%;
left: 10%;
background: #0af;
width: 354px;
height: 495px;
margin-left: -150px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 7000ms infinite linear;
}

.wave.-three {
animation: drift 7500ms infinite linear;
position: fixed;
background-color: #77daff;
}

.wave.-two {
animation: drift 3000ms infinite linear;
opacity: .1;
background: black;
position: fixed;
}

.boxwave:after {
content: ”;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 11;
transform: translate3d(0, 0, 0);
}
@keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}

Hiệu ứng chuyển màu


#animation-background-color {
width: 100%;
height: 100px;
animation: morph 3s infinite alternate;
}
@keyframes morph {
0% { background-color: rgba(0, 0, 0, 0); }
50% { background-color: rgba(255, 0, 0, 0.5); }
100% { background-color: rgba(0, 255, 0, 1); }
}

Scrolling Text Animation

https://codepen.io/yoannhel/pen/sJpDj

.animation {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
height: 160px;
overflow:hidden;
}
.animation__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.animation__container:before {
content: "[";
left: 0;
}

.animation__container:after {
content: “]”;
position: absolute;
right: 0;
}

.animation__container:after, .animation__container:before {
position: absolute;
top: 0;

color: #16a085;
font-size: 42px;
line-height: 40px;

-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.animation__container__text {
display: inline;
float: left;
margin: 0;
}

.animation__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;

-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.animation__container__list__item {
line-height:40px;
margin:0;
}

@-webkit-keyframes opacity {
0%, 100% {opacity:0;}
50% {opacity:1;}
}

@-webkit-keyframes change {
0%, 12.66%, 100% {transform:translate3d(0,0,0);}
16.66%, 29.32% {transform:translate3d(0,-25%,0);}
33.32%,45.98% {transform:translate3d(0,-50%,0);}
49.98%,62.64% {transform:translate3d(0,-75%,0);}
66.64%,79.3% {transform:translate3d(0,-50%,0);}
83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-o-keyframes opacity {
0%, 100% {opacity:0;}
50% {opacity:1;}
}

@-o-keyframes change {
0%, 12.66%, 100% {transform:translate3d(0,0,0);}
16.66%, 29.32% {transform:translate3d(0,-25%,0);}
33.32%,45.98% {transform:translate3d(0,-50%,0);}
49.98%,62.64% {transform:translate3d(0,-75%,0);}
66.64%,79.3% {transform:translate3d(0,-50%,0);}
83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-moz-keyframes opacity {
0%, 100% {opacity:0;}
50% {opacity:1;}
}

@-moz-keyframes change {
0%, 12.66%, 100% {transform:translate3d(0,0,0);}
16.66%, 29.32% {transform:translate3d(0,-25%,0);}
33.32%,45.98% {transform:translate3d(0,-50%,0);}
49.98%,62.64% {transform:translate3d(0,-75%,0);}
66.64%,79.3% {transform:translate3d(0,-50%,0);}
83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@keyframes opacity {
0%, 100% {opacity:0;}
50% {opacity:1;}
}

@keyframes change {
0%, 12.66%, 100% {transform:translate3d(0,0,0);}
16.66%, 29.32% {transform:translate3d(0,-25%,0);}
33.32%,45.98% {transform:translate3d(0,-50%,0);}
49.98%,62.64% {transform:translate3d(0,-75%,0);}
66.64%,79.3% {transform:translate3d(0,-50%,0);}
83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

https://thichchiase.com/programing/css/30-hieu-ung-pure-css-animation-snippets/

https://viblo.asia/p/14-css-tao-hieu-ung-cho-background-tuyet-dep-LzD5djaeZjY

Gradient Background Animation


.h100 {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
width: 200px;
height: 200px;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}