当前位置: 代码迷 >> 综合 >> 前端基础复习--17animation 动画?animate.css?
  详细解决方案

前端基础复习--17animation 动画?animate.css?

热度:76   发布时间:2024-01-31 23:24:31.0

1. animation 动画?

    动画复杂在哪里呢?在@keyframes里可以填很多个节点

    animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ,默认值就是1 ,??infinite无限次数
animation-timing-function : 动画的运动形式

    复合形式:animation:myBox 4s 2s infinite linear; ????第一个时间是动画持续时间 第二个是延迟时间

    注:
1. 运动结束后,默认情况下会停留在起始位置。
2. @keyframes :  from -> 0%   ,  to ->  100%

    animation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效
backwards  :  在延迟的情况下,让0%在延迟前生效
forwards  :  在运动结束的之后,停到结束位置
both  :  ??backwards和forwards同时生效

    animation-direction  :  属性定义是否应该轮流反向播放动画。
alternate?? :  一次正向(0%~100%),一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%

2. animate.css?
一款强大的预设css3动画库。
??????官网地址:https://daneden.github.io/animate.css/

基本使用:
animated : 基类(基础的样式,每个动画效果都需要加)
infinite : 动画的无限次数