css 动画 (transition animation)
文章目录
- 1. transition
- 1.2 transition-property
- 1.3 transition-duration
- 1.4 transiton-timing-function
- 1.5 transition-delay
- 1.6 简写属性
- 1.7 transition 的不足
- 1.8 一个简单的样式
- 2. 2D 转换 (transfrom)
- 2.1 缩放：`scale`
- 2.2 位移：translate
- 2.3 旋转：rotate
- 3. 3D 转换
- 3.1 旋转：rotateX、rotateY、rotateZ
- 3.2 移动：translateX、translateY、translateZ
- 3.3 透视：perspective
- 4. animation
- 4.1 定义动画
- @keyframes(关键帧) 用于 定义动画
- 4.2 调用动画
- 时间函数（animation-timing-function）
- 动画方向（animation-direction）
- 动画延迟（animation-delay）
- 动画迭代次数（animation-iteration-count）
- 动画填充模式（animation-fill-mode）
- 动画播放状态（animation-timing-function）
- 简写
- 5. 补充动画
- 5.1 按钮抖动动画
- 5.2 背景颜色随鼠标渐变
1. transition
animation 的学习之前 其实需要顺便提一下 transition
首先强调一下我认为他最大的不足
- 过渡只关心元素的初始状态和结束状态，没有方法可以获取到元素在过渡中每一帧的状态
下面介绍一下他的四个属性以及简写
1.2 transition-property
不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果 !!!
用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。
默认值为 all 也就是所有的元素都应用过渡效果。
<template><div id="test"></div>
</template>
<script>
export default {name: "Test"
}
</script>
<style scoped>
div{width: 200px;height: 200px;background-color: dodgerblue;transition-property: width, height;
}
div:hover {width: 400px;height: 400px;
}
</style>
当鼠标悬浮上去的时候 , 他会立即变成这个样子,过渡效果不会生效。因为没有设置 transition-duration 属性,他会立即变成最后的结果
1.3 transition-duration
用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0 , 为0时，表示变化是瞬时的，看不到过渡效果。
多个每个时长会被应用到由 transition-property 指定的对应属性上。
如果指定的时长个数小于属性个数，那么时长列表会重复.如果时长列表更长，那么该列表会被裁减。
1.4 transiton-timing-function
liner
ease-in
ease-out
ease-in-out
cubic-bezier
这里先提一下,下面 animation 里会有具体的解释
1.5 transition-delay
transition-delay 规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始
取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
一个完整的案例
div{width: 200px;height: 200px;background-color: #000000;transition-property: width;transition-duration: 3s;transition-timing-function: linear;transition-delay: 0.5s;
}
div:hover {width: 400px;
}
1.6 简写属性
transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
1.7 transition 的不足
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件的触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的,完美的解决了这些问题
1.8 一个简单的样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 过渡</title><style>body {margin: 0;padding: 0;background-color: #eeeeee;}.content {width: 800px;height: 320px;padding-left: 20px;margin: 80px auto;}.item {width: 230px;height: 300px;text-align: center;margin-right: 20px;background-color: #FFF;float: left;position: relative;top: 0;overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */transition: all .5s; /* 从最初到鼠标悬停时的过渡 */}.item .desc {position: absolute;left: 0;bottom: -80px;width: 100%;height: 80px;background-color: #ff6700;transition: all .5s;}/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */.item:hover {top: -5px;box-shadow: 0 0 15px #AAA;}/* 鼠标悬停时，让下方的橙色方形现身 */.item:hover .desc {bottom: 0;}</style>
</head>
<body>
<div class="content"><div class="item"><span class="desc"></span></div>
</div>
</body>
</html>
2. 2D 转换 (transfrom)
转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
- 2D转换包括：缩放、移动、旋转。
2.1 缩放：scale
格式：
transform: scale(x, y);transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。
2.2 位移：translate
格式：
transform: translate(水平位移, 垂直位移);transform: translate(-50%, -50%);
参数解释：
参数为百分比，相对于自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
2.3 旋转：rotate
格式：
transform: rotate(角度);transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：
transform-origin: 水平坐标 垂直坐标;transform-origin: 50px 50px;transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
3. 3D 转换
3.1 旋转：rotateX、rotateY、rotateZ
3D坐标系（左手坐标系）
浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度transform: rotateY(360deg); //绕 Y 轴旋转360度transform: rotateZ(360deg); //绕 Z 轴旋转360度3.2 移动：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿着 X 轴移动transform: translateY(360px); //沿着 Y 轴移动transform: translateZ(360px); //沿着 Z 轴移动3.3 透视：perspective
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
格式有两种写法：
作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。
格式举例：
perspective: 500px;
4. animation
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：
制作动画分为两步：
- 定义动画 @keyframes
- 使用(调用)
4.1 定义动画
@keyframes(关键帧) 用于 定义动画
@keyframes animation01 {0% {margin-top: 10px;}100% {margin-top: 20px;}
}
0%是动画的开始，100%是动画的完成。中间可以插入任意百分比
在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
可以改变任意多的样式任意多的次数。
或用关键词"from"和"to",等同于0%和100%
两者等同
@keyframes animation01 {from {margin-top: 10px;}to {margin-top: 20px;}
}
部分属性是不可以发生改变的,因为 “不连续”,属性间的变换没有中间值
4.2 调用动画
要调用动画,必须要得给他添加一些必要的属性:
时间函数（animation-timing-function）
animation-timing-function 属性定义了动画的播放速度曲线。
| 值 | 描述 |
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| steps | 指定了时间函数中的间隔数量（步长） |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
默认值，如果没有显示写调用的函数，则默认为ease。
cubic-bezier(n,n,n,n) 是生成速度曲线的函数
从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即 cubic-bezier 函数中传递的四个值,分别依次带入 P1(x1,y1)，P2(x2,y2)
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。
举例 cubic-bezier(0.25,0.1,0.25,1)
画的丑,下面不手画了
给大家一个地址: https://easings.net/
可以自己去看看 cubic-bezier( ) 函数的演示
and cubic-bezier 可以自己随心所欲地绘制 cubic-bezier( ) 函数
https://cubic-bezier.com/#.17,.67,.83,.67
而 steps 会一卡一卡的 生成我们的动画
动画方向（animation-direction）
animation-direction: normal 正序播放 终点=>起点
animation-direction: reverse 倒序播放 终点=>起点
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
动画延迟（animation-delay）
animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。默认值0s，表示动画在该元素上后立即开始执行。该值以秒(s)或者毫秒(ms)为单位。
动画迭代次数（animation-iteration-count）
animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。默认值只播放一次。
single-animation-iteration-count = infinite | number
动画填充模式（animation-fill-mode）
animation-fill-mode是指给定动画播放前后应用元素的样式。
single-animation-fill-mode = none | forwards | backwards | both
animation-fill-mode: none 动画执行前后不改变任何样式
animation-fill-mode: forwards 保持目标动画最后一帧的样式
animation-fill-mode: backwards 保持目标动画第一帧的样式
animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。
动画播放状态（animation-timing-function）
animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。默认值为running
single-animation-timing-function = running | paused
running 动画正常播放
paused 动画暂停播放
简写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
但是需要注意: 简写属性里面不包含 animation- play-state
5. 补充动画
5.1 按钮抖动动画
<template><div :class="{ shake: disabled }"><button @click="warnDisabled">Click me</button><span v-if="disabled">This feature is disabled!</span></div>
</template><script>
export default {name: 'ShakeButton',data() {return {disabled: false}},methods: {warnDisabled() {this.disabled = truesetTimeout(() => {this.disabled = false}, 1500)}}
}
</script><style>
.shake {animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform: translate3d(0, 0, 0);
}@keyframes shake {10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,50%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(4px, 0, 0);}
}
</style>
5.2 背景颜色随鼠标渐变
演示地址
<template><div@mousemove="onMousemove":style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"class="movearea"><p>Move your mouse across this div...</p><p>x: {{ x }}</p></div>
</template><script>
export default {name: 'ShakeButton',data() {return {x: 0}},methods: {onMousemove(e) {this.x = e.clientX}}
}
</script><style>
* {padding: 0;margin: 0;
}
.movearea {width: 100vw;height: 100vh;transition: 0.3s background-color ease;
}
</style>
css 动画 (transition animation)相关推荐
- CSS动画（animation）详解
CSS动画(animation)详解 通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- CSS动画教程:animation和transition动画
[1] animation出现的问题 **学过CSS的应该对,animation怎么用应该很熟悉了. 但是animation有个问题. 比如下面这个图;** @keyframes toRight{0% ...
- css:transform,transition,animation总结
1. transform 2d 名称 说明 transform 变形功能 transform-orign 指定变换起点 1.1 transform的属性值 名称 说明 参数 translate/tra ...
- CSS动画【animation】
一. 动画(animation) 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数. 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者 ...
- CSS 动画指南： 原理和实战（二）
简介:无论动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是用Flash还是CSS, 动画的基本原理和设计准则都未曾变过的. 在这篇文章中,我们会先解释CSS动画的基本概念 ...
- html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...
- css动画详解 (transition animation)
属性 transition(4个属性): transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transi ...
- 前端动画大全：css的transition、css3的animation、Jquery的animate、js的setInterval
前端制作动画的几种方式(css3,js,jquery) 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总 ...
最新文章
- three ways for reducing the level of anxiety
- ajax返回数据类型为JSON数据的处理
- ioslabel阴影,UILabel的内阴影
- MySQL中序列的作用_MySql中序列的应用和总结
- ubuntu 下eclipse 启动时出现An error has occurred. See the log file的问题
- python面试题Python2.x和Python3.x的区别
- mac mysql 中文_mac 中 mysql 中文乱码问题
- Android架构 armeabi、armeabi-v7a、arm64-v8a、x86详解
- java redis令牌桶_接口限流令牌桶算法Redis分布式限流
- java可达性_java 垃圾回收总结（可达性分析 引用分类
- 好家伙，花了一个月时间写了个网易云，以后再也不用充VIP了！
- c语言怎么移位,C语言中的移位操作
- 数据治理-数据质量-数据质量参考架构
- 峰会回顾 | 阿里云与StarRocks合作、开放、共赢
- 最新版养猫小程序前端+后端搭建详细教程
- 矩阵 Hessian
- VC++获取不同Windows版本的方法
- vim底部查找最后一个关键字
- python django怎么读_怎么读django
- 阿里短信发送报错 InvalidTimeStamp.Expired