Hiệu ứng transition trong css

Trasition là hiệu ứng cho phép bạn tạo độ trễ cho chuyển động hoặc sự thay đổi của một đối tượng nào đó trên website của bạn. Ví dụ như bây giờ bạn muốn tạo một hình ảnh chạy từ từ từ phải sang trái thì bạn có thể sử dụng transition trong css để làm điều này.

.example {
	transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Đa số các trình duyệt mới hiện nay đều hỗ trợ thuộc tính transition, đối với IE các phiên bản cũ thì sẽ không hoạt động được.

Xem demo

Bên dưới là nội dung của ví dụ mình đã gửi, bạn có thể sử dụng transition để làm hình nền chuyển đổi từ từ hoặc bạn cũng có thể làm cho box di chuyển từ trái qua phải và ngược lại.

<div class="animate box"></div>

Bạn đặt một thẻ div như bên trên vào tập tin html của bạn. Sau đó bạn định dạng lại css cho thẻ div đó giống như code mình gửi phía dưới.

body {
	margin: 0;
	padding: 0;
}
.box {
	height: 100px;
	width: 100px;
}
.animate {
	background-color: limegreen;
	cursor: pointer;
	left: 0;
	position: absolute;
	top: 20%;
}

.animate {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
}

.animate.move {
	left: 100%;
	margin-left: -100px;
}