动画

动画

1、关键帧:

(1)表示符keyframs:

(2)语法结构(0%-100%)

@keyframsNAME{0%{CSS样式{

color:red;

}

}10%{CSS样式{

}

}

}

2、animation与transition:

不同点,动画不用出发;

相同点:都可以通过时间改变css样式属性

3、常用属性;

animaton-name:给动画起个名称;

animaton-duration:设置动画持续周期;

animaton-timing-function:

设置速率:

1,ease 逐渐变慢

2,linear 匀速运动

3,ease-in 加速

4,ease-out 减速

5,ease-in-out 先加速后减速

6,cubic-bezier 贝塞尔曲线 自定义时间曲线

(x1,y1,x2,y2)四个值两个点【0-1】

animation-delay:延迟。

animaiton-iteration-count:动画执行次数:默认一次,infinite(无限大)

animation-play-state:

用来控制动画播放状态;

running(启动)和paused(暂停);

animation-direction:播放方向

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 5,854评论 0 4
  • 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间...
    阿振_sc阅读 4,432评论 1 5
  • 2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 3,073评论 0 0
  • 本文将从为什么要探究更自然的动画、如何探究运动曲线方程、列举常用的运动曲线、分别使用js和css实现曲线动画效果、...
    转移到知乎熊的一些事阅读 5,164评论 2 1
  • 我们写的应用程序往往都不是静态的,因为它们需要适应用户的需求以及为执行各种任务而改变状态。 在这些状态之间转换时,...
    sunmumu1222阅读 4,079评论 0 2

友情链接更多精彩内容