gradient
<gradient> 是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。
<gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。
线性渐变linear-gradient()
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为to bottom。
在决定渐变的方向主要有两种方法：
- angle：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转
- 关键词：通过关键词来确定渐变的方向。比如to top、to right、to bottom和to left
这是未指定渐变轴(线)时的样式，默认取值
to bottom（对应180deg），这里表现和指定了180deg时是一样的。
这是指定了0deg的样式，和to top表现相同。
仔细思考to bottom | 180deg和to top | 0deg之间的区别，就差不多能想通了
想象一支箭，这支箭就是渐变轴，to top right指的就是箭头指向右上位置，然后再看颜色，最后一个颜色永远在箭头上，这里最后一个颜色是blue，所以容器的右上是蓝色。
当然，实际实现中，渐变轴不会刚好指向容器右上角，而是右上角的连线相交并垂直于渐变轴。
linke this
推荐：
你真的理解CSS的linear-gradient？
上文作者写的渐变可视化工具
Ultimate CSS Gradient Generator
关于渐变配合transition的效果：豪华的按钮
Transitions
CSS Transitions 是一个 CSS 模块，定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
支持animation和transition的CSS属性：CSS animated properties
注意：
在插入元素（如.appendChild()）或改变属性 display: none 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。
这是什么意思呢？
<body>
<style>
#btn {
display: none;
width: 50px;
height: 20px;
background-color: blue;
}
</style>
<button id="btn">target</button>
<button id="btn2">Click</button>
<!-- 在插入元素（如 .appendChild()）或改变属性 display: none 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。 -->
<script>
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2")
btn2.addEventListener("click",function() {
btn.style.display = "block";
btn.style.transition = "all 1s";
btn.style.width = "200px";
btn.style.height = "200px";
btn.style.backgrounColor = "green";
})
</script>
</body>
点击Click按钮后，将会给target按钮设置display:block，及其对应CSS样式，并且将会以transition过渡动画的方式来改变样式。
但是实际上，在点击Click后，不会有过渡动画出现，而是直接呈现应用样式后的页面。
没有过渡，Duang的一声直接出现了~
这就是注意里说的，元素将视为没有开始状态，始终处于结束状态。
加个settimetou。
btn2.addEventListener("click",function() {
btn.style.display = "block";
window.setTimeout(function() {
btn.style.transition = "all 1s";
btn.style.backgroundColor = "green";
btn.style.width = "200px";
btn.style.height = "200px";
},5);
})
过渡时截取到的某一帧
属性
transition-property
指定应用过渡属性的名称
- none：没有过渡动画
- all：即transition支持的CSS属性都会有过渡动画
- IDENT：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。
transition-duration
以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
本身什么意思都知道了，提一下多个属性的使用。
上代码：
<style>
#btn {
width: 50px;
height: 20px;
transition-property: width ,height ,background-color;
transition-duration: 2s, 1s, 4s;
}
#btn:hover {
width: 250px;
height: 250px;
background-color: yellowgreen;
}
</style>
<button id="btn">target</button>
width,height,background-color都会按照所设置的duration来展现过渡动画。
transition-property: height,background-color,width;
transition-duration: 4s, 1s;
时长个数小于属性个数，那么时长列表会重复，很明显了，width将会按照4s的duration来执行过渡，因为重复了，以此类推。
这个就是贝塞尔缓动函数了，这里就不一一试了。
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
除了预先定义好的几个值还可以自己定义，关于缓动函数请看：
<timing-function>
强荐：缓动函数速查表
transition-delay
CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
这里和duration是类似的。
transition-property: height,background-color,width;
transition-duration: 6s, 3s, 1s;
transition-delay: 1s, 3s, 6s;
延时最长的，执行过程最快，执行过程最快的，延时越长。
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:
-
propertyName
字符串，指示已完成过渡的属性。 -
elapsedTime
浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受transition-delay影响。
如果取消了过渡则不会触发 transitionend 事件，因为在过渡完成前动画的属性值改变了。
<style>
#btn {
width: 50px;
height: 20px;
transition: all 1s;
}
#btn:hover {
width: 250px;
}
</style>
<button id="btn">target</button>
<script>
btn.addEventListener("transitionend",function() {
console.log(event);
});
</script>
一些样式
按钮渐变背景
Animations
CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
- 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
- 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
- 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
简写属性形式：
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode
@keyframes
@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。
要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name 这个属性来将一个动画同其关键帧声明匹配。每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。
#animation {
width: 100px;
height: 100px;
background-color: red;
margin-left: 0px;
animation: abc 1s infinite;
}
@keyframes abc {
0% {
margin-left: 200px;
}
100% {
margin-left: 300px;
}
}
在这则动画中，初始状态margin-left:200px，那么动画的起始点就是200px处开始，动画结束后位于300px处，然后回到200px（0%）其实状态。
取消动画后，div就会回到原点。
-
如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。
-
如果一个@keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准。 因为@keyframes 的规则不存在层叠样式(cascade)的情况，即使多个关键帧设置相同的百分值也不会全部执行。
-
如果某一个关键帧出现了重复的定义，且重复的关键帧中的css属性值不同，以最后一次定义的属性为准。
如：@keyframes identifier { 0% { top: 0; left: 0px} 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; left: 30px;} }上面这个例子中，50% 关键帧中设置的属性top: 10px是有效的，但是其他的属性会被忽略
-
关键帧中出现的
!important关键词将会被忽略
语法取值：
-
from：等效于0% -
to：等效于100%
animation-name
animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
/* Multiple animations */
#animation {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: A 2s,B 2s;
}
@keyframes A {
0% { top: 0; left: 0}
100% {top: 100px; left: 100px }
}
@keyframes B {
0% {}
100% { background-color: blue }
}
没啥好说的。
animation-duration | animation-timing-function | animation-delay
-
animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。（单位为秒(s)或者毫秒(ms)，无单位值无效。） -
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function>。- 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
- 定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
-
animation-delay定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。-
0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度； - 定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。（-1s就是假设动画走了1s后的位置处开始动画）
- 如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。
-
animation-iteration-count
animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.
默认属性 animation 默认播放动画循环一次.
-
infinite：无限循环播放动画. -
<number>：动画播放的次数 不可为负值. 可以用小数定义循环(0.5 将播放动画到关键帧的一半（from 0 ~ 50%).
animation-direction
animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定
-
normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。A>B | A>B | A>B | A>B -
alternate： 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代。A > B | B > A | A > B | B > A -
reverse：反向运行动画，每周期结束动画由尾到头运行。B > A | B > A | B > A | B > A -
alternate-reverse：动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。B > A | A > B | B > A | A > B
用来指定在动画执行之前和之后如何给动画的目标应用样式。
-
none：动画执行前后不改变任何样式 -
forwards： 目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction和animation-iteration-count
请看：
理解animation-fill-mode属性
animation-fill-mode
你所不知道的animation-fill-mode细节
animation-fill-mode的一些思考
待更CSS-3D
网友评论