Transition trong css w3schools

Trong CSS3 có 2 thuộc tính quan trọng là Transition và Animation. Đây là một kỹ thuật rất hay giúp chuyển động cho phần tử HTML mà không cần Javascript hay Flash

Hoạt ảnh chuyển động dựa trên CSS đã thay đổi

Trong bài viết này mình sẽ giới thiệu với các bạn thuộc tính Animation và ứng dụng đơn giản của nó

VD. ứng dụng chuyển động sau. thử nghiệm. https. //jsfiddle. net/tuanvh/fbLegec2/

/* Cú pháp  */
@keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}
div {

    width: 50px;
    height: 50px;
    background-color: yellow;
    position: relative;
    /* Cú pháp chuẩn */
    animation-name: vidu;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: vidu;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

Cấu hình @keyframe

Để tạo hoạt ảnh bằng CSS3, bạn cần phải nắm được quy tắc @keyframes bởi đây chính là nơi bạn đặt mã CSS để tạo hoạt ảnh

cú pháp

@keyframes animationname {keyframes-selector {css-styles;}}

in which

@keyframes animationname {keyframes-selector {css-styles;}}

4. từ khóa

@keyframes animationname {keyframes-selector {css-styles;}}

5. tên của hoạt ảnh

@keyframes animationname {keyframes-selector {css-styles;}}

6. Được xác định bởi phần trăm thời gian diễn ra hoạt ảnh

@keyframes animationname {keyframes-selector {css-styles;}}

7. Can have 1 or many properties css

VD

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

in which

@keyframes animationname {keyframes-selector {css-styles;}}

8. is an animation section name

@keyframes animationname {keyframes-selector {css-styles;}}

9. CSS hiện tại

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

0. CSS mới

Hoặc bạn có thể thay thế “từ” và “đến” bằng vị trí thời gian mà bạn muốn có sự thay đổi

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

Trình duyệt Internet Explorer từ phiên bản 10 trở lên, Firefox và Opera hỗ trợ hoàn toàn

@keyframes animationname {keyframes-selector {css-styles;}}

4 và thuộc tính

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

2, còn nếu bạn muốn trình duyệt Chrome và Safari được hỗ trợ thì bạn phải sử dụng tiền tố

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

3

/* Chrome, Safari, Opera */
@-webkit-keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

hoạt hình

    animation-name: vidu;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

Giải thích

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

4. animation name was write in @keyframes

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

5. time running animation

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

6. khoảng thời gian trước khi chạy hoạt hình

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

7. số lượng hoạt hình chạy, bạn có thể điền 'infinite' để chạy vô hạn

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

8. hướng chạy, có các giá trị

@keyframes vidu {
    from {background-color: yellow;}
    to {background-color: red;}
}

9. chạy ngược chiều

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

0. chạy 1 lần xuôi chiều, lần sau ngược chiều, lần sau ngược chiều và cứ thế cho đến khi nào hết số lượt chạy cho phép

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

1. more family speed, has the value

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

2. bắt đầu chậm, sau đó nhanh, kết thúc chậm

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

3. speed đều

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

4. started slow

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

5. end chậm

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

6. bắt đầu và kết thúc chậm

chuyển tiếp

div {
  width: 200px;
  height: 200px;
  background-color: #ffee00;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
   transition: width 2s, height 2s, transform 2s;
}
div:hover {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(180deg); /* Safari */
  transform: rotate(180deg);
}

thử nghiệm. https. //jsfiddle. net/tuanvh/rnaxykvd/8/

Thuộc tính “chuyển đổi” giúp chuyển đổi dựa trên sự thay đổi giá trị của các thuộc tính CSS

cú pháp

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

7

Các thuộc tính trong bộ chuyển đổi

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

8. tên thuộc tính CSS mà bạn muốn chạy hiệu ứng

@keyframes vidu {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: yellow;}
}

9. time run effect

/* Chrome, Safari, Opera */
@-webkit-keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

0. gia tốc điều khiển

/* Chrome, Safari, Opera */
@-webkit-keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

1. speed (tính theo giây)

/* Chrome, Safari, Opera */
@-webkit-keyframes vidu {
    0%   {background-color:yellow; left:0px; top:0px;}
    25%  {background-color:red; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

2. viết tắt các thuộc tính, lần như trên

Hy vọng là với kiến ​​thức về chuyển tiếp & hoạt ảnh thì bạn sẽ cảm thấy mình làm được nhiều điều thú vị hơn với CSS