logo

Đang load dữ liệu

logo devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER

Đào tạo - Phần mềm - Cho thuê nhân sự

  • 0969.609.003
  • 0978.611.889
  • Trang chủ
  • Các khoá đào tạo
    • Chuyên đề WEB - PHP

      • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
      • Lập trình web frontend - reactjs - [75 giờ]
      • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

      Chuyên đề Mobile

      • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
      • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

      Chuyên đề JAVA

      • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
      • Lập trình ứng dụng với java - [100 giờ]
      • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

      Chuyên đề NETWORK/SECURITY

      • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
      • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
      • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

      Chuyên đề .NET

      • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
      • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
      • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

      Chuyên đề khác

      • Ngôn ngũ lập trình C/C++ - [80 giờ]
  • Lập trình cho trẻ em
  • Dịch vụ
    • Đào tạo theo như cầu
    • Cung cấp thiết bị - Phần mềm
    • Tư vấn - Thiết kế mạng hạ tầng
    • Tư vấn - Triển khai dịch vụ mạng
    • Tư vấn - Tư vấn, triển khai giám sát hệ thống
    • Thực tập dự án
  • Lịch khai giảng
  • Tin tức
    • Tin tức và sự kiện
    • Tin hoạt động
    • Tin công nghệ
    • Hội thảo, workshop, Codecam
    • Thông tin việc làm
    • Cẩm nang chia sẻ kiến thức
  • Tiện ích
  • Liên hệ

Hội thảo, Workshop, Codecam

Jan - 2019

05

Tìm hiểu Transition trong css

Hội thảo, Workshop, Codecam

Tìm hiểu Transition trong css

 

TRANSITION

Một sự cải tiến mới trong css3 là khả năng viết các hiệu ứng (transition). Các nhà phát triển giao diện người dùng đã tìm ra khả năng thiết kế các tương tác này trong html và css mà không cần Javascript.

Với các CSS3 transitions bạn có thể thay đổi diện mạo hành vi của một phần tử bất cứ khi nào có sự tác động vào nó. Ví dụ như hover, click, …

Như đã đề cập ở trên, để transition được diễn ra, một yếu tố để thay đổi được trạng thái, cần có những sự tác động vào nó. VD: hover, focus, active and target Transition có 4 thuộc tính liên quan đến quá trình chuyển đổi: transition-property, transition-duration, transition-timing-function, và transition-delay. Nhưng không phải tất cả các thuộc tính này là bắt buộc, nhưng 3 thuộc tính đầu tiên là được sử dụng phổ biến nhất.

Dưới đây là một ví dụ thay đổi background của một khối khi ta :hover vào nó

Để được hỗ trợ tốt nhất trên các trình duyệt, ta thêm các tiền tố sau:

Transitional Properties

Điều quan trọng cần lưu ý là không phải tất cả các thuộc tính đều có thể chuyển đổi được. chỉ các thuộc tính có điểm giữa chừng có thể xác định được. Màu sắc, kích thước, phông chữ có thể chuyển đổi từ giá trị này sang giá trị khác. dưới đây là một số transition phổ biến:

Transition timing

Trong quá trình chuyển đổi transition có thời gian diễn ra bằng cách sử dụng transition-duration được xác định bằng các giá trị thời gian giây(s), mili giây (ms). Khi transition nhiều thuộc tính, bạn có thể đặt nhiều thời lượng cho mỗi thuộc tính và được cách nhau bằng dấu phẩy, VD:

Transition delay

Ngoài việc khai báo thuộc tính transition, timing, duration, bạn cũng có thể đặt delay với thuộc tính transition-delay với giá trị thời gian, giây hoặc mili giây. Như với tất cả các thuộc tính transition khác, delay nhiều lần, các giá trị cũng được cách nhau bằng dấu phẩy.

Nguồn: Sưu tầm từ internet via Devmaster Academy

Các bài viết cùng chủ đề

Tìm hiểu Transition trong css
Tìm hiểu Transition trong css
WORKSHOP: THIẾT KẾ VÀ LẬP TRÌNH WEBSITE VỚI CÔNG NGHỆ  ASP.NET MVC 5
WORKSHOP: THIẾT KẾ VÀ LẬP TRÌNH WEBSITE VỚI CÔNG N...

Các khóa đào tạo chuyên đề

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Lập trình ứng dụng trên nền tảng android Lập trình ứng dụng trên nền tảng android
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack

Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
Lập trình ứng dụng với WINDOWS FORM Lập trình ứng dụng với WINDOWS FORM
Lập trình ứng dụng với JAVA (FORM) Lập trình ứng dụng với JAVA (FORM)
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
Lập trình frontend với reacjs (Full) Lập trình frontend với reacjs (Full)
DEVMASTER
Viện Công Nghệ Và Đào Tạo Devmaster

DEVMASTER ACADEMY

Địa chỉ: Tầng 6 - Tòa nhà VIỆN CÔNG NGHỆ
Số 25, Vũ Ngọc Phan - Láng Hạ - Đống Đa - Hà Nội

Hotline: 0969 609 003 | 0978 611 889

devmaster.contact@gmail.com

hna.tvchung@gmail.com

CÁC KHÓA HỌC CHUYÊN ĐỀ

  • Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
  • Lập trình ứng dụng trên nền tảng android
  • Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
  • Lập trình ứng dụng với WINDOWS FORM
  • Lập trình ứng dụng với JAVA (FORM)
  • Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
  • Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
  • Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER - Học thực tế * Làm thực tế * Cam kết việc làm
Copyright by Ⓒ DEVMASTER 2015