★提高阅读体验★ 👉 ♠ 一级标题 👈 👉 ♥ 二级标题 👈 👉 ♣ 三级标题 👈 👉 ♦ 四级标题 👈

目录

• ♠ 触发型动画
• • ♥ transition动画
  • • ♣ transition的属性
    • ♣ 使用方式
    • ♣ 使用演示
    • • ♦ 位置变换
      • ♦ 角度变换
      • ♦ 缩放变换
      • ♦ 颜色变换
• ♠ 非触发动画
• • ♥ animation动画
  • • ♣ animation的属性
    • • ♦ animation-iteration-count类型
      • ♦ animation-direction类型
      • ♦ animation-play-state类型
      • ♦ animation-fill-mode类型
    • ♣ 使用方式
    • • ♦ @keyframes
    • ♣ 使用演示
    • • ♦ 自动旋转
      • ♦ 透明闪烁
• ♠ 推送
• ♠ 结语

♠ 触发型动画

本章节学习通过transition样式执行一些触发型的动画，比如悬停后的变换等

♥ transition动画

css中我们可以通过transition实现一些动画的效果，下面我们看一下怎么使用

♣ transition的属性

♣ 使用方式

• 使用方式1

transition :width 0.2s ease-in 1s;

属性+时间+曲线+延迟

• 使用方式2

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay:1s;

四个属性全部列出来

• 使用方式3

transition: all 1s ease-in 1s

所有属性都变换，all+时间+曲线+延迟

♣ 使用演示

这一模块我们通过演示示例，来展示transition的用法，首先我们创建一个按钮，在网页中间，代码如下所示

测试按钮

♦ 位置变换

通过transform: translate(xx)来设置按钮悬停时候的位置变化

测试按钮

♦ 角度变换

通过transform: rotate(xx)来设置按钮悬停时候的位置变化

测试按钮

♦ 缩放变换

通过transform: scale(xx)来设置按钮悬停时候的大小变化

测试按钮

♦ 颜色变换

通过background-color来设置按钮悬停时候的颜色变化

测试按钮

很简单也很实用，css的属性都可以通过transition来变换，宽度、颜色等等的

♠ 非触发动画

我们经常需要组件自动去做一些动画效果，为此我们需要用到animtion动画，animation动画是通过定义特殊字段@keyframes书写的动作结构，再通过animation限定的结构执行的

♥ animation动画

css中我们可以通过animation实现一些自动执行的动画效果，下面我们看一下怎么使用

♣ animation的属性

♦ animation-iteration-count类型

• 默认：1
• infinite：无限循环

♦ animation-direction类型

• normal：默认，正常

• reverse：反向运动

• alternate：正反轮播

• alternate-reverse：反向播放后，恢复到初始状态

♦ animation-play-state类型

• running：默认，正常运行

• paused：暂停动画

♦ animation-fill-mode类型

• none：默认，执行后恢复到原状态

• forwards：执行完保持结束状态

• backwards：延时前永远保持动画初始状态

♣ 使用方式

♦ @keyframes

• @keyframes方式1

@keyframes test1{from{transform: rotate(60deg)}to{transform: rotate(360deg)}
}

关键字@keyframes+动画名
对象from下写css的属性，意味初始状态
对象to下写css的属性，意味结束状态

• @keyframes方式2

@keyframes test2{0% {transform: rotate(60deg)}50% {transform: rotate(160deg)}100% {transform: rotate(260deg)}
}

关键字@keyframes+动画名
百分数指动画的执行进度，50%在动画执行一半时达到的状态

• @keyframes方式3

@keyframes test3{0% {transform: rotate(60deg)}50% {transform: rotate(160deg)}to{transform: rotate(360deg)}
}

方式1和方式2可以混用

• animation执行方式1

animation-name: test1;
animation-duration: 2s;
animation-dela：1s;
animation-iteration-count: infinite;

animation属性字段+参数

• animation执行方式2

animation: test1 2s 1s infinite;

animation:参数

♣ 使用演示

以下我们通过代码和演示制作几个可以自动执行的动画

♦ 自动旋转

测试按钮

♦ 透明闪烁

测试按钮

♠ 推送

• Github

https://github.com/KingSun5

♠ 结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。