參考https://www.openfoundry.org/tw/tech-column/9233-css3-animation
主要兩個 CSS3 在動畫的屬性： Transition 與 Animation
Transition 實際練習:
.class{
width:150px;
height:150px;
background: #000;
}
.class:hover{
width:250px;
height:250px;
transition: all 1s;
}
基本上來說，當我hover class這個class時，寬高本來是150px*150px，hover之後會變成250px*250px,行程是1S,
至於transition的屬性細節這裡就不特別說明! 也可配合JQ或JS達成一些效果，例如click事件或hover事件時，可以
對一個class addClass或者是toggleClass...不過transition有些缺點，他的開始和結束必須都是具體數字，若不是具體數字
，則transition就無作用了；
這時就會用到css3的動畫Animation，這邊先列出基本的範例!
.test_class{
width:100px;
height:100px;
background:#000;
animation: 1s colorChange; //要指定動畫秒數跟名稱
}
@keyframes colorChange{
0%{background:#000;}
50%{background:#fff;}
100%{background:#000;}
}
以這個範例來看，整個做動會在1秒完成，過程中從黑色色塊變成白色色塊，最後再變成黑色色塊，
這邊一樣先不提的太細，先求會使用，之後再想想能做什麼案例!
留言列表
