CSS3学习系列之动画
2021-07-04 09:05
标签：count 方式 完成 参数 transform function back log func 在css3中，transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能，可通过transitions属性来使用transitions功能。 transitions属性的使用方法如下所示： transitions：property durantion timing-function 其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。例子如下： 在CSS3中，还有另外一种使用transitions功能的方法，就是将transitions属性中的三个参数改写成transition-property属性、transition-duration属性、transition-timing-function属性，这三个属性的含义及属性值的指定方法与transitions属性中的三个参数的含义及指定方法完全相同。 可以使用transitions功能同时对多个属性值进行平滑过渡，例子如下： Animations功能与transitions功能相同，都是通过改变元素的属性值来实现动画效果的，它们的区别在于：使用transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；例子如下： 可以通过animation-iteration-count属性来指定动画的播放次数，也可以通过对该属性指定infinite属性值让动画不停地循环播放。 Animations功能中实现动画的方法： linear 在动画开始时到结束时以同样的速度进行改变 ease-in 动画开始时速度很慢，然后速度沿曲线值进行加快 ease-out 动画开始时速度很快，然后速度沿曲线值进行放慢 ease 动画开始时速度很慢，然后速度沿曲线值进行加快，然后沿曲线值放慢 ease-in-out 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢 CSS3学习系列之动画 标签：count 方式 完成 参数 transform function back log func 原文地址：http://www.cnblogs.com/hetaojs/p/7120509.html
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Transitions功能的使用示例title>
style>
div{
background-color: #ffff00;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover{
background-color: #00ffff;
}
style>
head>
body>
div>示例文字div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>使用transitions功能实现多个属性的平滑过渡title>
style>
div {
background-color: #ffff00;
color: #000000;
width: 300px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover {
background-color: #003366;
color: #ffffff;
width: 400px
}
style>
head>
body>
div>示例文字div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>animations功能的使用示例title>
style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div:hover{
-webkit-animation-name:mycolor;
-webkit-animations-duration:5s;
-webkit-animation-timing-function: linear;
animation-name:mycolor;
animation-duration: 5s;
animation-timing-function: linear;
}
style>
head>
body>
div>示例文字div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>让多个属性同时变化title>
style>
div{
position: absolute;
background-color:yellow;
top: 100px;
width: 500px;
}
@keyframes mycolor {
0%{
background-color: red;
transform: rotate(0deg);
}
40%{
background-color: darkblue;
transform: rotate(30deg);
}
70%{
background-color: yellow;
transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
}
}
div:hover{
animation-name:mycolor;
animation-duration: 5s;
animation-timing-function: linear;
}
style>
head>
body>
div>示例文字div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>实现网页淡入效果的示例title>
style>
@keyframes fadein {
0%{
opacity:0;
background-color: white;
}
100%{
opacity: 1;
background-color: white;
}
}
body{
animation-name:fadein;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
style>
head>
body>
div>示例文字div>
body>
html>
上一篇：tfs 禁止多人签出