css动画笔记

twcmeizi

于 2021-03-22 11:20:38 发布

阅读量149

点赞数

分类专栏： css3动画文章标签： css animation

本文链接：https://blog.csdn.net/lm13420109892/article/details/114284176

版权

css3动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3过渡transition

transition：transition-property transition-duration transition-timing-function transition-delay

值描述默认值例如

transition-property

指定CSS属性的name，transition效果

transition-property: none|all| property;

none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

div{

width:100px;

transition-property: width;

}

div:hover
{
    width:300px;
}

当鼠标滑过div的时候，width由100px 转变成300px。

transition-duration

transition效果需要指定多少秒或毫秒才能完成

transition-duration: time;

默认值是 0，意味着不会有效果。

div{

width:100px;
transition-property: width;
transition-duration:2s;

}

div:hover
{
    width:300px;
}

当鼠标滑过div的时候，2秒完成：width由100px 转变成300px。

transition-timing-function

指定transition效果的转速曲线

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease（默认值）	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

指定切换效果的速度

transition-delay

定义transition效果开始的时候

transition-delay: time;

指定秒或毫秒数之前要等待切换效果开始

transiton

简写属性，用于在一个属性中设置四个过渡属性。

transition：transition-property  transition-duration  transition-timing-function  transition-delay

css转换transform：转换的效果是让某个元素改变形状，大小和位置。

2D转换

translate()

平移

translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。

rotate()

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

rotate(angle)

定义 2D 旋转，在参数中规定角度。

scale()

该元素增加或减少的大小（缩放）

scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。

skew()

倾斜，
transform:skew(<angle> [,<angle>]);

skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

matrix()

matrix(n,n,n,n,n,n)

定义 2D 转换，使用六个值的矩阵。

transform 适用于2D或3D转换的元素

transform-origin 允许您更改转化元素位置

css动画animation

属性描述

@keyframes

规定动画。

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

值

说明

animationname

必需的。定义animation的名称。

keyframes-selector

必需的。动画持续时间的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

注意： 您可以用一个动画keyframes-selectors。

css-styles

必需的。一个或多个合法的CSS样式属性

animation

所有动画属性的简写属性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。

animation-name

规定 @keyframes 动画的名称。

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:mymove;
	animation-duration:5s;

	/* Safari and Chrome */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:5s;
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

animation-name:mymove;

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-duration: time;

指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

animation-timing-function: value;

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

animation-delay 规定动画何时开始。默认是 0。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画

animation-iteration-count

规定动画被播放的次数。默认是 1。

animation-iteration-count: value;

值	描述
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

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...）正向播放。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

animation-play-state: paused|running;

值	描述
paused	指定暂停动画
running	指定正在运行的动画

CSS3 多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。