【CSS3】渐变、过渡和动画用法 |
您所在的位置：网站首页 › css动画animation必填属性 › 【CSS3】渐变、过渡和动画用法 |
【CSS3】渐变、过渡和动画用法
|
文章目录
一、CSS3渐变（Gradients）1.1、线性渐变（linear-gradients）1.2、重复线性渐变（repeating-linear-gradient）1.3、径向渐变（radial-gradient）1.4、重复径向渐变（repeating-linear-gradient）
二、CSS3过渡（Transition）2.1、必填属性transition-property （属性名称）transition-duration （花费时间）
2.2、可选属性transition-timing-function （时间曲线）transition-delay （开始时间）
3.3、简写语法
三、CSS3动画（Animate）3.1、基础用法@keyframes（创建动画）animation-name（绑定动画）animation-duration（动画时长）
3.2、可选属性animation-timing-function（速度曲线）animation-delay（何时开始）animation-fill-mode（不播放样式）animation-iteration-count（播放次数）animation-direction（逆向播放）animation-play-state（当前状态）
3.3、简写语法
一、CSS3渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡（ ie9 及更早版本不支持渐变属性） 1.1、线性渐变（linear-gradients） 如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。 background: linear-gradient(direction, color-stop1, color-stop2, ...); direction 取值： 方向值（固定）角度值（任意）描述to top0deg渐变方向为从下到上to top right45deg渐变方向为从左下到右上to right90deg渐变方向为从左到右to right bottom135deg渐变方向为从左上到右下to bottom180deg渐变方向为从上到下to bottom left225deg渐变方向为从右上到左下to left270deg渐变方向为从右到左to left top315deg渐变方向为从右下到左上 示例： DOCTYPE html> 一颗不甘坠落的流星 div { width: 100px; height: 50px; border: 1px solid black; float: left; margin: 20px; } #div1 { background: linear-gradient(to right, red, green); } #div2 { background: linear-gradient(to top right, red, green, yellow); } #div3 { background: linear-gradient(36deg, red, green, yellow, black); } to right to top right 36deg
CSS3 渐变（gradients）可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 ie9及更早版本不支持渐变属性
2.1、必填属性
transition-property （属性名称）
transition-duration （花费时间）
属性描述示例transition-property规定应用过渡的 CSS 属性的名称width、heighttransition-duration定义过渡效果花费的时间默认是 0，数字格式（0.5s、1s）
示例：
DOCTYPE html>
一颗不甘坠落的流星
div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellowgreen;
float: left;
margin: 20px;
}
#div1 {
transition: width 0.5s;
}
#div1:hover {
width: 150px;
}
#div2 {
transition: width 1s, height 2s;
}
#div2:hover {
width: 150px;
height: 150px;
}
transition-delay（可选）：规定过渡效果何时开始。默认是 0。 示例： DOCTYPE html> 一颗不甘坠落的流星 div { width: 100px; height: 100px; border: 1px solid black; background-color: yellowgreen; float: left; margin: 20px; } #div1 { transition: width 0.5s ease-in-out; } #div1:hover { width: 150px; } #div2 { transition: width 1s ease-out 1s, height 2s ease-in 2s; } #div2:hover { width: 150px; height: 150px; }
CSS3 动画（animate）可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 ie9及更早版本不支持渐变属性
3.1、基础用法
@keyframes（创建动画）
/*
@keyframes ： 创建属性
myfirst: 创建的动画名称，自定义
*/
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
也可以使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成））
/*
@keyframes ： 创建属性
myfirst: 创建的动画名称，自定义
*/
@keyframes myfirst
{
from {background: red; left:0px; top:0px;}
to {background: yellow; left:200px; top:0px;}
}
/* 等价于 */
@keyframes myfirst
{
0％ {background: red; left:0px; top:0px;}
100％ {background: yellow; left:200px; top:0px;}
}
animation-name（绑定动画）
animation-duration（动画时长）
属性描述是否必填animation-name规定 @keyframes 动画的名称。必填animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。必填
示例：
DOCTYPE html>
一颗不甘坠落的流星
div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellowgreen;
float: left;
margin: 20px;
}
#div1 {
animation-name: example1;
animation-duration: 4s;
}
#div2 {
animation-name: example2;
animation-duration: 1s;
}
@keyframes example1 {
from {background-color: red;}
to {background-color: yellow;}
}
@keyframes example2 {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}
CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。 在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。 值描述none（默认值）动画在执行之前或之后不会对元素应用任何样式。forwards元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。backwards元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。both动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。 animation-iteration-count（播放次数） animation-iteration-count：规定动画被播放的次数。默认是 1，infinite无限循环。 animation-direction（逆向播放） animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 值描述normal动画正常播放（向前）。默认值reverse动画以反方向播放（向后）alternate动画先向前播放，然后向后alternate-reverse动画先向后播放，然后向前 animation-play-state（当前状态） animation-play-state： 规定动画是否正在运行或暂停。默认是 “running”，paused暂停。 3.3、简写语法 简写语法： transition : [ animation-name ] || [animation-duration ] || [...] ;注意：animation-name 和 animation-duration 是必填选项！ 示例： div{ animation: myfirst 5s linear; animation: myfirst 5s linear 2s infinite alternate; } @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } 示例： div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } /* 简写就是 */ div { animation: example 5s linear 2s infinite alternate; } |
【本文地址】