Quá trình chuyển đổi so với biến đổi trong CSS là gì?

  background-color: yellow;
  border-radius: 30px;
  height: 300px;
  width: 300px;
  margin: 0 auto;

Codepen #2

Cài đặt

 class="container">
   class="box">

.container {
  border: 1px solid grey;
  height: 400px;
  width: 90%;
  margin: 0 auto;
  padding: 15px;
}

.box {
  background-color: yellow;
  border-radius: 30px;
  height: 300px;
  width: 25%;
}

1. Tạo trạng thái di chuột cho CONTAINER theo đó màu nền của HỘP chuyển sang màu xanh lục
2. Làm cho hộp di chuyển khi di chuột bằng cách thêm

    class="container">
      class="box">
   
   

   2
3. Đó là một sự chuyển đổi rõ rệt. Làm mịn nó với quá trình chuyển đổi 1 giây hoạt động khi người dùng di chuyển con trỏ của họ vào vùng chứa và cũng hoạt động khi họ di chuyển con trỏ ra khỏi vùng chứa
4. Thử nghiệm với ba giá trị sau với

    class="container">
      class="box">
   
   

   3 trên vùng chứa

   •  class="container">
        class="box">
     
     

     4

   •  class="container">
        class="box">
     
     

     5

   •  class="container">
        class="box">
     
     

     6
5. Thảo luận về các quan sát của bạn từ #4 và nghiên cứu tài liệu để chứng minh và làm rõ các quan sát của bạn

Codepen #3

Tạo 4 div bên trong một phần tử gói. Khi phần tử gói được di chuột vào, hãy áp dụng các chuyển đổi khác nhau cho tất cả 4 div bên trong bằng cách sử dụng độ trễ chuyển đổi để các chuyển đổi thực hiện vào các thời điểm khác nhau. Làm cho chúng di chuyển, thay đổi màu sắc, thay đổi đường viền, phát điên. Sử dụng khối mã này làm điểm bắt đầu

div .a { transition-delay: 0s; }
div .b { transition-delay: 1s; }
div .c { transition-delay: 2s; }
div .d { transition-delay: 3s; }

Codepen #4

Cài đặt

 class="container">
   class="box">

.container {
  border: 1px solid grey;
  height: 400px;
  width: 90%;
  margin: 0 auto;
  padding: 15px;
}

.box {
  background-color: yellow;
  border-top: 5px solid red;
  height: 95px;
  width: 100px;
  -webkit-transform: rotate(45deg);
}

1. Xoay hộp ngược chiều kim đồng hồ 45 độ
2. Điều gì xảy ra khi bạn vượt qua rotate một đối số của

    class="container">
      class="box">
   
   

   7 hoặc

    class="container">
      class="box">
   
   

   8 hoặc

    class="container">
      class="box">
   
   

   9
3. Bạn có thể kiểm soát nguồn gốc mà quá trình chuyển đổi bắt đầu từ đó. Thêm

   .container {
     border: 1px solid grey;
     height: 400px;
     width: 90%;
     margin: 0 auto;
     padding: 15px;
   }
   
   .box {
     background-color: yellow;
     border-radius: 30px;
     height: 300px;
     width: 25%;
   }
   

   0 vào trạng thái di chuột của vùng chứa của bạn và sau đó thử nghiệm thay đổi giá trị x và y của thuộc tính. Bạn nhận thấy điều gì khi sử dụng 0 cho cả x và y, so với sử dụng 50% cho cả x và y?
4. Thực hiện các phép biến đổi

   .container {
     border: 1px solid grey;
     height: 400px;
     width: 90%;
     margin: 0 auto;
     padding: 15px;
   }
   
   .box {
     background-color: yellow;
     border-radius: 30px;
     height: 300px;
     width: 25%;
   }
   

   1 và

   .container {
     border: 1px solid grey;
     height: 400px;
     width: 90%;
     margin: 0 auto;
     padding: 15px;
   }
   
   .box {
     background-color: yellow;
     border-radius: 30px;
     height: 300px;
     width: 25%;
   }
   

   2

Codepen #5

Cài đặt

div {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 100px auto 0;
}

@keyframes testAnimation {
  0% {
    transform: rotate(360deg);
    border-radius: 50% 0 50% 0;
  }
  100% {
    background-color: aqua;
    border-radius: 0 50% 0 50%;
  }
}

1. Thảo luận với đối tác của bạn về những gì testAnimation sẽ làm
2. Kết nối các khung hình chính đã xác định với div
3. Tạo thời lượng 3 giây cho hoạt ảnh
4. Tạo độ trễ hoạt hình bằng không
5. Tạo số lần lặp vô hạn
6. Tạo một chức năng thời gian tuyến tính
7. Đặt hướng hoạt hình thành luân phiên

Codepen #6

Thử nghiệm với tất cả những gì bạn vừa học và tạo (các) hoạt ảnh 4 giai đoạn. Gợi ý. CodePen #5 là hoạt hình 2 giai đoạn. Đăng hoạt ảnh trong kênh chùng nhóm thuần tập

Sự khác biệt giữa biến đổi và chuyển tiếp là gì?

Sự khác biệt giữa quá trình chuyển đổi và biến đổi và hoạt hình trong CSS là gì?

Chuyển tiếp trong CSS là gì?

chuyển đổi dịch là gì (