周日的html学习

总结一下目前学习的CSS动画：
过渡动画：可通过hover触发，格式如下

transition: property duration timing-function delay;
    property定义应用该特性的属性名，如宽度width
    duration定义动画时长，如.2s或2ms
    timing-function定义动画模式，linear ease ease-in-out常用，自定义可以用cubic-bezic(p1,p2,p3,p4)定义贝塞尔曲线
    delay定义延迟一段时间播放

动画：animation以及@keyframes
@keyframes规定动画的关键帧，进度以%表示

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

animation类似transition

animation: name duration timing-function delay iteration-count direction;
    iteration-count定义播放次数
    direction定义是否正反向轮播
例子：
    animation: myfirst 5s linear 2s infinite alternate;
额外属性：
    animation-play-state:paused;定义是否播放，可以实现暂停
    animation-fill-mode: forwards;定义闲时填充模式，在结束后以最后帧(forwards)或者在delay前以第一帧填充(backwards)或者全都要(both)

另外：animation是CSS3新属性，需要注意兼容性

注意到学习的网页中有看板娘(live2d)和音乐播放器(APlayer)，查询后发现是开源项目，以后有需要可以添加。

来源：https://www.cnblogs.com/Stratford-International/p/11965798.html