CSS动画

动画基础

阴影

文字阴影

1
2
3
4
5
6
7
8
9
/* 
    text-shadow:阴影1，阴影2，...
        阴影格式：
            参数1：横向偏移位置
            参数2：纵向偏移位置
            参数3：模糊度
            参数4：颜色
*/
text-shadow: 5px 10px 3px red,5px 10px 3px blue;;

盒子阴影

1
2
3
4
5
6
7
/* 
    盒子阴影 box-shadow
        格式：box-shadow:阴影1，阴影2，..
        阴影格式：
        水平偏移位置，垂直偏移位置，模糊度，外延值，颜色，内置阴影
*/
  box-shadow: 5px 5px 3px 5px #ccc inset;

渐变 （gradients）

线性渐变 （Linear gradients）

image-20210208164332427

  • 语法
1
2
3
4
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 
	direction  方向
*/
  • 示例
1
2
3
4
5
6
7
/* background-image: linear-gradient(red,green,blue); */
/* background-image: linear-gradient(to top,#69c0ff,#ffc53d); */
/* background-image: linear-gradient(to left,#69c0ff,#ffc53d); */
/* background-image: linear-gradient(to left top,#69c0ff,#ffc53d); */
background-image: linear-gradient(20deg,#69c0ff 20%,#ffc53d 40%);
/* 重复设置线性渐变 */
/* background-image: repeating-linear-gradient(to left,#69c0ff,#ffc53d 99%); */

径向渐变 （Radial gradients）

image-20210208164342487

  • 语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
 /* 
	position
		语法(at x y)都是从左上角原点为参考点
		x,y可以是像素 也可以是百分比 18% 38%
	shape
		ellipse  椭圆  默认值
		circle 圆    
	size
		最近边 closest-side
		最远边 farthest-side
		最近角 closest-corner
		最远角 farthest-corner   
*/
  • 示例
1
background: radial-gradient(at 20px 40% circle closest-corner ,#69c0ff,#ffc53d);

CSS Transition 过渡

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

transition 语法

1
2
3
4
transition: transition-duration | transition-delay | transition-property | transition-timing-function
img{
    transition: 1s 1s height ease;
}
  • 这其实是一个简写形式，可以单独定义成各个属性。
1
2
3
4
5
6
img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}
  • 例：当鼠标放置于缩略图之上，缩略图会迅速变大。注意，缩略图的变大是瞬间实现的。下面是代码，相当简单。
1
2
3
4
5
6
7
8
9
img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

transition-duration 指定状态变化所需要的时间。

1
2
3
img{
    transition: 1s;
}

transition-delay 延迟（delay）

  • delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。
1
2
3
img{
    transition: 1s height, 1s 1s width;
}

transition-property 指定transition适用的属性

  • 只适用于height。
1
2
3
img{
    transition: 1s height;
}
  • 在同一行transition语句中，可以分别指定多个属性。
1
2
3
img{
    transition: 1s height, 1s width;
}

transition-timing-function 状态变化速度

  • transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。
1
2
3
img{
    transition: 1s ease;
}
  1. linear：匀速
  2. ease-in：加速
  3. ease-out：减速
  4. cubic-bezier函数：自定义速度模式

cubic-bezier 函数，可以使用工具网站来定制。

1
2
3
img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

transition的使用注意

  1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
  2. 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
  3. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

transition的局限

transition的优点在于简单易用，但是它有几个很大的局限。

  1. transition需要事件触发，所以没法在网页加载时自动发生。
  2. transition是一次性的，不能重复发生，除非一再触发。
  3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

CSS动画参考链接

CSS Transform 转变

字面上就是转变，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。

语法

1
2
3
4
5
6
7
8
9
transform ： none | <transform-function> [ <transform-function> ]* 
   也就是：
transform: rotate | scale | skew | translate |matrix;
/*
	translate() 平移  translate(x, y)
	scale() 缩放  scale(x,y)
	rotate() 旋转 
	skew()  倾斜 skew(x,y)
*/

transform参考链接

CSS Animation 动画

animation 属性是一个简写属性，用于设置六个动画属性：

  • 语法
1
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
属性
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 动画播放方向

  • 子属性

    • animation-fill-mode
    1
    2
    3
    4
    5
    animation-fill-mode  属性规定动画在播放之前或之后，其动画效果是否可见。
    	none	不改变默认行为。
    	forwards	动画停在最后一帧
    	backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定	义）。
    	both	向前和向后填充模式都被应用。
    • animation-play-state 属性规定动画正在运行还是暂停。
    1
    2
    3
    animation-play-state: paused|running;
        paused	规定动画已暂停。	
        running	规定动画正在播放。
    • animation-direction
    1
    2
    3
    4
    5
    6
    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
        normal	默认值。动画按正常播放。	
        reverse	动画反向播放。
        alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	
        alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。	
        inherit	从父元素继承该属性

image-20210210182017950

image-20210210174446167

@keyframes 规则

  • 语法
1
@keyframes animationname {keyframes-selector {css-styles;}}
属性
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。 0-100% from与0%相同 to与100%相同
css-styles 必需。一个或多个合法的 CSS 样式属性。
  • 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@keyframes mymove{
	from {
		top:0px;
	}
	to {
		top:200px;
	}
}

@keyframes mymove{
	0%   {
        top:0px;
    }
	27%  {
        top:200px;
    }
	50%  {
        top:100px;
    }
	78%  {
        top:200px;
    }
	100% {
        top:300px;
    }
}