admin管理员组

文章数量:1516870

过渡和动画的基本介绍

过渡和动画的基本介绍

  • 过渡初始
    • 过渡的四大要素
    • 过渡的简写方式
    • 动画的创建
    • 动画的七大要素
    • 动画的播放和暂停
    • 过渡和动画的区别

过渡初始

过渡：元素从一种样式变换为另一种样式时为元素添加效果
过渡不同于动画，他不会无缘无故的发生，过渡必须要触发一个事件才能实现效果，鼠标在hover状态下相当于一个移入事件

过渡的四大要素

1、要控制的css属性名，默认值：all，不是必需
2、完成过渡需要的时间，s,ms 1000ms=1s 必须要有
3、过渡的速度曲线，不是必需，ease默认值
ease 变速，规定慢速开始，然后变快，然后慢速结束的过渡效果
linear 匀速，规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值可能的值是0至1之间的数值
4、过渡延迟时间，s,ms

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡的四大要素</title><style>.box{width: 100px;height: 100px;background: red;margin: 100px auto;/*多个属性可以逗号隔开*//*要控制的css属性名*/transition-property:width,background,height ;/*完成过渡需要的时间*/transition-duration: 2s,3s,5s;/*过渡的速度曲线*//*transition-timing-function: linear;*/transition-timing-function: linear,linear,ease;/*过渡延迟时间，s，ms*/transition-delay: 500ms,300ms,500ms;}.box:hover{background: blue;width: 500px;height: 300px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

过渡的简写方式

  1. 所有要控制的样式使用相同的过渡方式
  • 属性值依次：all 完成过渡的时间 速度曲线 延迟开始时间
  • 如果使用变速，速度曲线也可以不写
  • 如果延迟开始时间没有，也可以不写
  1. 要控制的样式使用不同的过度方法
  • 对要控制的css属性分组，每一组可以书写不同的过渡方式，组与组之间用逗号隔开
  • 每一组书写方法：要控制的css属性名 完成过渡的时间 速度曲线 延迟开始时间
  • 如果哪一组的值使用默认值，也可以不写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡的简写方式</title><style>.box{width: 100px;height: 100px;background: red;margin: 100px auto;/*transition: all 2s linear 1s;*//*transition: 2s linear 1s;*//*transition: 2s;*/transition: width 2s 1s,height 3s,background 4s linear 1s;}.box:hover{background: blue;width: 500px;height: 300px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

动画的创建

动画，通过改变元素的样式给元素添加动画
动画的创建有两种方式：

  1. from-to :from{}代表动画开始；to{}代表动画结束
  2. 百分比创建动画（推荐使用）：0%{};代表动画开始，后面可以设置多个关键帧，如：50%{};80%{}……，100%{};代表动画结束。
  3. @keyframes用于创建一个动画，动画名称自己设置
  4. 语法：animation：要绑定的动画名称 动画完成的时间 速度曲线 延迟开始时间 播放次数 轮流反向播放 保持最后状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画初始</title><style>.box{width: 100px;height: 100px;background: red;margin: 100px auto;/*animation: name 10s linear 3s;*//*语法*//*    animation：要绑定的动画名称 动画完成的时间 速度曲线 延迟开始时间 播放次数 轮流反向播放 保持最后状态*//*  延迟开始时间： s,ms*//*  播放次数：默认值为1次，infinite无限次播放*//*animation: name 5s 2;*//*animation: name 2s infinite;*//*轮流反向播放：默认值normal，轮流反向播放alternate，必须要有播放次数*//*animation: name 5s 2 alternate;*//*保持最后的状态：forwards*/animation: name 5s forwards;}/*@keyframes用于创建一个动画，动画名称自己设置*/@keyframes name {/*!*动画开始*!*//*from{width: 100px;height: 100px;background: red;}*//*!*动画结束*!*//*to{width: 500px;height: 500px;background: blue;}*//*百分比指的是动画完成时的百分比*/0%{width: 100px;height: 100px;background: red;}30%{width: 200px;height: 300px;background: green;}50%{width: 200px;height: 300px;background: green;}80%{width: 200px;height: 300px;background: yellow;}100%{width: 500px;height: 500px;background: blue;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

动画的七大要素

1.要绑定的动画名称：必须要有
2. 动画完成的时间：必须要有 s,ms
3. 速度曲线，默认ease变速，凡是只要过渡能用的动画都能用
4. 延迟开始时间： s,ms
5. 播放次数：默认值为1次，infinite无限次播放
6. 轮流反向播放：默认值normal，轮流反向播放alternate，必须要有播放次数
7. 保持最后的状态：forwards

动画的播放和暂停

animation-play-state规定动画播放（running）还是暂停（paused）
动画的暂停：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画的暂停</title><style>.box{width: 100px;height: 100px;background: red;margin: 100px auto;animation: name 10s;}.box:hover{animation-play-state: paused;}/*@keyframes用于创建一个动画，动画名称自己设置*/@keyframes name {0%{width: 100px;height: 100px;background: red;}100%{width: 500px;height: 500px;background: blue;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

动画的播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画的播放</title><style>.box{width: 100px;height: 100px;background: red;margin: 100px auto;animation: name 10s;animation-play-state: paused;.box:hover{animation-play-state: running;}/*@keyframes用于创建一个动画，动画名称自己设置*/@keyframes name {0%{width: 100px;height: 100px;background: red;}100%{width: 500px;height: 500px;background: blue;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

过渡和动画的区别

1.过渡需要事件触发，动画不需要事件触发
2.过渡只有开始-结束，动画可以设置多个关键帧

本文标签： 过渡和动画的基本介绍

版权声明：本文标题：过渡和动画的基本介绍 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/biancheng/1731167486a1591984.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。