css动画

1、在哪儿产生动画,比如:width height background-color

2、动画的时间,比如:1s 500ms 0.5s

3、运动曲线,比如linear匀速、ease首尾慢

4、延迟多长时间开始动画

运动曲线:all 1s linear 匀速

              all 1s ease       开始和结束慢速,中间加速

              all 1s ease-in     开始慢速,结尾突然停止

              all 1s ease-out       突然开始,结尾慢速

              all 1s ease-in-out       开始和结束慢速

transfrom变形: translate(100px,100px) 位移

                       rotate(360deg)                          旋转

                        scale(0.5, 0.2)                          缩放

                        skew(0, 45deg)                         斜切

设置盒子按3D空间显示:transform-style: preserve-3d

设置透视距离:perspective

animation-play-state: paused 动画暂停

animation-play-state: running 动画运行

 多帧动画:          @keyframes moving{

                                        0%  {    transform: translateY(0px);

                                                }

                                        50% { transform: translateY(400px);

                                                }

                                        100% { transform: translateY(0px);

                                                }

                                      }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 花开的时节,来看恒山、已是满眼的绿色、已是满山遍野的花朵,在苍松翠柏之中更显芳香迷人。在曲径通幽的山道上,节节向上...
    兰如纯阅读 363评论 0 1
  • 我们在之前的学习中写过一个强制下线的demo,其中涉及到了一个模拟的登陆功能。那么今天,在原有的基础上,我们通过S...
    h080294阅读 376评论 0 0
  • 最近,经常有两个人出现在我的梦中。在梦里,我与他们“斗智斗勇”,无论怎么斗,都是他们失败告终,然后我醒来。这...
    Anny筱女巫阅读 656评论 0 2