一、过渡（transition）

1、过渡（transition）

2、属性值

二、动画

三、实战

1、米兔

2、奔跑的少年

3、弹力球

4、酷炫球

一、过渡（transition）

1、过渡（transition）

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验

2、属性值

transition-property：指定要执行过渡的属性

多个属性间使用,隔开；
如果所有属性都需要过渡，则使用all关键字；
大部分属性都支持过渡效果；
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；

transition-duration：指定过渡效果的持续时间

时间单位：s和ms（1s=1000ms）

transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition-timing-function：过渡的时序函数

linear匀速运动
ease 默认值，慢速开始，先加速后减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier()来指定时序函数 https://cubic-bezier.com
steps()分步执行过渡效果，可以设置第二个值：
- end，在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡

transition：可以同时设置过渡相关的所有属性

只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

示例

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

几种过渡效果对比

linear匀速运动

transition-timing-function: linear;

ease 默认值，慢速开始，先加速后减速

transition-timing-function: ease;

ease-in 加速运动

transition-timing-function: ease-in;

ease-out 减速运动

transition-timing-function: ease-out;

cubic-bezier()来指定时序函数

transition-timing-function: cubic-bezier(.17, 1.79, .68, -0.69);

steps()分步执行过渡效果

/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);

transition-timing-function: steps(2, start);

二、动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {from {margin-left: 0;}to {margin-left: 900px;}
}

animation-name 指定动画的关键帧名称
animation-duration：指定动画效果的持续时间
animation-delay：动画效果的延迟，等待一段时间后在执行动画
animation-timing-function：动画的时序函数
animation-iteration-count 动画执行的次数
- infinite 无限执行
animation-direction 指定动画运行的方向
- normal 从from向to运行，每次都是这样，默认值
- reverse 从to向from运行，每次都是这样
- alternate 从from向to运行，重复执行动画时反向执行
- alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state 设置动画的执行状态
- running 动画执行，默认值
- paused 动画暂停
animation-fill-mode 动画的填充模式
- none 动画执行完毕，元素回到原来位置，默认值
- forwards 动画执行完毕，元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards和backwards

示例：

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */animation: test 2s 2s linear infinite alternate both;

三、实战

1、米兔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>米兔练习</title><style>.box{height: 270px;width: 132px;margin: 100px auto;background-image: url("../img/transition/bigtap-mitu-queue-big.png");/* 表示这个过渡持续时间是0.3秒，分为3步走 */transition: 0.3s steps(3);/* 表示背景的初始位置 */background-position: 0px 0px;}.box:hover {/* 这个表示当鼠标浮上来时，从上面的0 0位置到当前的这个-396 0位置，会经历上面的0.3s,并且分为3步到达 */background-position: -396px 0;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2、奔跑的少年

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>奔跑的少年</title><style>.boy{height: 270px;width: 295px;margin: 100px auto;background-position: 0 0;background-image: url("../img/transition/bg2.png");animation: run 1s steps(6) infinite;}/* 创建关键帧 */@keyframes run{from {background-position: 0 0;}to {background-position: -1500px 0;}}</style>
</head>
<body><div class="boy"></div>
</body>
</html>

3、弹力球

.outer {width: 100%;height: 700px;border-bottom: 10px solid #000;/* 外边距重叠，开启BFC */overflow: hidden;
}.ball {width: 100px;height: 100px;border-radius: 50%;background-color: gray;animation: bounce 6s ease-in;
}@keyframes bounce {from {margin-top: 0;}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%,98%,to {margin-top: 600px;animation-timing-function: ease-out;}10%,20%,30%,40%,50%,60%,70%,80%,90% {animation-timing-function: ease-in;}10% {margin-top: 60px;}20% {margin-top: 120px;}30% {margin-top: 180px;}40% {margin-top: 240px;}50% {margin-top: 300px;}60% {margin-top: 360px;}70% {margin-top: 420px;}80% {margin-top: 480px;}90% {margin-top: 540px;}96% {margin-top: 580px;}99% {margin-top: 590px;}
}

4、酷炫球

div {float: left;width: 100px;height: 100px;border-radius: 50%;animation: bounce .5s infinite ease-in alternate;
}.ball1 {background-color: red;animation-delay: .1s;
}.ball2 {background-color: yellow;animation-delay: .2s;
}.ball3 {background-color: green;animation-delay: .3s;
}.ball4 {background-color: blue;animation-delay: .4s;
}.ball5 {background-color: pink;animation-delay: .5s;
}.ball6 {background-color: orange;animation-delay: .6s;
}.ball7 {background-color: fuchsia;animation-delay: .7s;
}.ball8 {background-color: gray;animation-delay: .8s;
}.ball9 {background-color: darkcyan;animation-delay: .9s;
}.ball10 {background-color: indigo;animation-delay: 1s;
}.ball11 {background-color: black;animation-delay: 1.1s;
}.ball12 {background-color: darkcyan;animation-delay: 1.2s;
}.ball13 {background-color: darkkhaki;animation-delay: 1.3s;
}.ball14 {background-color: brown;animation-delay: 1.4s;
}.ball15 {background-color: mediumpurple;animation-delay: 1.5s;
}@keyframes bounce {from {margin-top: 0;}to {margin-top: 500px;}}

Web前端之过渡与动画相关推荐

从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
7个Web前端极其精美的动画效果模板
1. jQuery动态随机背景滚动源码下载 / 在线演示 2. jquery animate分页按钮源码下载 / 在线演示 3. html5+css3日食场景特效源码下载/ 在 ...
php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
7个Web前端极其精美的动画效果模板（附源码）
1. jQuery动态随机背景滚动源码下载 / 在线演示 2. jquery animate分页按钮源码下载 / 在线演示 3. html5+css3日食场景特效源码下载/ ...
web前端技术（二）之动画进阶
web前端技术(二)之动画进阶目录 web前端技术(二)之动画进阶前言一.web前端动画是什么二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
Web前端培训分享：Web前端到底是什么？
从2015年开始,Web前端的需求量像火箭一样"嗖"的一下就上去了.现在各种传统行业如电子.机械.建筑等并不被年轻人所青睐,互联网时代的年轻人更加喜欢快捷的.方便的,信息化的工作. ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...
好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...

Web前端之过渡与动画

一、过渡（transition）

1、过渡（transition）

2、属性值

二、动画

三、实战

1、米兔

2、奔跑的少年

3、弹力球

4、酷炫球

Web前端之过渡与动画相关推荐

最新文章

热门文章