html生日动画代码_CSS 动画（transition 和 animation）

最新推荐文章于 2024-02-17 05:55:45 发布

weixin_39637614

最新推荐文章于 2024-02-17 05:55:45 发布

阅读量996

点赞数

文章标签： html生日动画代码

动画的原理

动画

定义：由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，以肉眼因视觉残像产生错觉，而误以为是活动的画面

概念

帧：每个静止的画面都叫做帧

播放速度：每秒24帧（影视）或者25帧（动画）或者30帧（游戏）

案例：

简单动画

代码：
HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="demo"></div>
</body>
</html>

CSS

#demo{
  width:100px;
  height:100px;
  border:1px solid red;
  position:relative;
  left:0;
}

JS

var n = 1                               
var id=setInterval ( ()=>{ 
  if(n<=200){
    n=n+1;
    demo.style.left=n+'px';  *注意demo属性必须是ID名；要加 n+'px'
  }
  else{
    clearInterval(id)；
  }
}，1000/60)

拓展1：setInterval语法setInterval(函数，时间)
拓展2：()=>{} 相同含义 function(){}
拓展3：clearInterval(id)——清除计时器（需要配合id指定）

代码链接：（简单动画）

JS Binjs.jirengu.com

原理：

每过一段时间（通过setInterval计时器+if/else函数）

将Div移动一段距离，直到到达目标地点

注意⚠️：案例动画是用left制作的，但前端高手是不会用left制作动画的哦～

CSS 动画的两种做法

第一种：transition 过渡
第二种：animation 动画（推荐）

transition（过渡）

作用

补充中间帧

语法

transition: 属性名 | 时长 | 过渡方式 | 延迟
注意⚠️：指定第一个数字默认指定为时长，第二个数字默认才是延迟时间
拓展：1s = 1000ms（毫秒）

  transition: left 200ms linear

可以用逗号分隔两个不同属性

  transition: left 200ms , top 400ms

可以用all代表所有的属性

  transition:all 200ms

过渡方式

常用的有：

linear 线性

动画会以恒定的速度从初始状态过渡到结束状态

ease 缓动

动画开始时逐步加速，中间逐渐减慢，结束时逐步加速

ease-in-out

动画开始时缓慢，中间逐步加速，结束时逐渐减慢

延迟

延迟多久时间后执行动画

具体含义可以查看MDN文档

<timing-function>developer.mozilla.org

好啦，看完常态看变态（感觉哪里不对～）

不是所有属性都能进行Transition（过渡）

display:none ==> block 没法过渡

显示和消失是无法过渡的～

一般改成visibility:hidden ==> visibile (没有为什么，我也不知道)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="demo"></div>
  <button id="but">消失</button>

</body>
</html>
————————————————————————————————————
*{
  margin:0;padding:0;box-sizing:border-box;
}
#demo{
  width:100px;
  height:100px;
  border:1px solid red;
  visibility:visibile;
}
#demo.h{
  visibility:hidden;
}
————————————————————————————————————
but.onclick=()=>{
  demo.classList.add('h')
  setTimeout(()=>{
    demo.remove()
  },1000)
}

代码链接：（visibility过渡）

JS Binjs.jirengu.com

display与visibility 区别JS Bindisplay与visibility 区别

display:none（消失） | display:block（显示）
visibility:hidden （隐藏）| visibility:visibile（显示）

display:block 和 visibility:visibile 都有让元素显示的意思，那么两者的区别在与：

display:none（消失）是在不再占用空间

visibility:hidden （隐藏）使元素在网页上隐藏，但仍占用空间

background背景颜色可以过渡吗？
opacity透明度可以过渡吗？

过渡必须要有起始

一般只有一次动画，或者两次
比如hover和非hover状态的过渡

animation 动画

用法

声明关键帧
添加动画

声明关键帧

语法

@keyframes 动画名{ }

标准写法

from/to

@keyframes 动画名 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

百分数推荐

@keyframes 动画名 {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

添加动画

语法

animation：动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 |

动画名（animation-name）

指定执行某个动画

时长（animation-duration）

s 或者 ms

过渡方式（animation-timing-function）

与transition取值是一样的

延迟（animation-delay）

延迟多久时间后执行动画

次数（animation-iteration-count）

数字（3或者2.4）或者 infinite（无限循环）

方向（animation-direction）

normal 默认正常
reverse 相反方向
alternate 默认正常方向循环（需要配合次数）
alternate-reverse 默认相反方向循环（需要配合次数）

填充模式（animation-fill-mode）

none 默认
forwards 最后静止不动（保持最后一帧）
backwards （需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画
both (forwards+backwards相结合需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画，动画结束后保持最后一帧

是否暂停（animation-play-state）

running 恢复运行动画
paused 暂停动画

使用以上两种方法制作动画

使用两次transform

.a===transform===>.b
配合setTimeout或者监听transitioned事件
.b===transform===>.c

代码链接：（元素移动）

JS Binjs.jirengu.com

使用animation

代码链接：（跳动的心）

JS Binjs.jirengu.com

weixin_39637614

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html生日动画代码_CSS 动画（transition 和 animation）

动画的原理动画定义：由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，以肉眼因视觉残像产生错觉，而误以为是活动的画面概念帧：每个静止的画面都叫做帧播放速度：每秒24帧（影视）或者25帧（动画）或者30帧（游戏）案例：简单动画代码：HTML<!DOCTYPE html><html><head> <meta charset="utf-8"...
复制链接

扫一扫

html生日动画代码_CSS 动画（transition 和 animation）

动画的原理

CSS 动画的两种做法

transition（过渡）

不是所有属性都能进行Transition（过渡）

过渡必须要有起始

animation 动画

用法

声明关键帧

添加动画

使用以上两种方法制作动画

“相关推荐”对你有帮助么？