动画

第一步:声明动画方法

@keyframes rotation{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
  }
}


1.@keyframes 是声明动画方法的关键字
2.rotation 声明的方法名称
3.0%,%100
4.transform:first (0deg); 初始的角度
5.transform:last (360deg); 完整一个周期将结束的角度
6.0-360是顺时针;360-0是逆时针。

第二步:调用动画方法

animation: rotation linear 5s infinite;


1.animation 是调用的关键字
2.rotation 方法名称
3.linear 动画模式(匀速)
4.5s 动画一周期的时间
5.infinite 是动画无限循环

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

推荐阅读更多精彩内容

  • 写在前面:这是一篇菜鸟的学习笔记,记录效果实现过程,而没有考虑安全、兼容、性等问题。供新手参考,也希望前辈们指点。...
    im宇阅读 3,550评论 0 4
  • 阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 an...
    sherlock221b阅读 2,532评论 0 10
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,898评论 0 4
  • 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间...
    阿振_sc阅读 948评论 1 5
  • 有一个精致的动画进度条,上面还有当前进度的百分比数字显示,而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非...
    心羽暖姐姐阅读 2,593评论 0 0