前端开发的动画实例_教你入门CSS_Transition

web前端开发做一个动画网页|前端动画都是用什么开发|前端开发css文件模板

CSS3时代的到来,CSS3动画也随之诞生,良好的兼容性(请自动忽视IE9以下→_→)和性能,不使用任何插件,就可以让网页拥有平滑的过渡,丰富的交互,酷炫的动画,而且与HTML5相结合,还可以做出一些有趣的小游戏。
CSS3动画很强大,但简单来说,其实就是两个CSS3的属性,一个是transition,一个是animation。下面我们先来谈谈tranistion

transition

什么是transition?以下是W3C官方的解释:

Normally when the value of a css property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
简单来说,就是通常一个元素的CSS属性改变时,呈现的结果是即时更新,没有过渡,效果非常生硬。为了解决这个问题,我们将使用CSS3的过渡属性—transition。

transition 有四个过渡属性:

transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。

简写语法:transition: property duration timing-function delay;

transition-property

描述:规定设置过渡效果的 CSS 属性的名称。

none: 没有属性会获得过渡效果。
all:所有改变属性都将获得过渡效果。
property:定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔,比如说width,height等。

例子:

width有过渡效果:

html 代码

<!DOCTYPE html>
<head>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
margin:50pxauto;
transition-property: width;
transition-duration:1s;
background:red;
}
div:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

所有改变属性都将获得过渡效果:

html 代码

<!DOCTYPE html>
<head>
<title>最新css前端开发</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
margin:50pxauto;
transition-property:all;
transition-duration:1s;
background:red;
}
div:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

transition-duration

描述:规定完成过渡效果需要多少秒。

例子:

  • 过渡的时间为2s

html 代码

<!DOCTYPE html>
<html>
<head>
<title>web前端开发界面实例</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
margin:50pxauto;
transition-property:all;
transition-duration:2s;
background:red;
}
div:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

transition-delay

描述:定义过渡效果何时开始。

例子:

  • 延迟3S后开始过渡动画。

html 代码

<!DOCTYPE html>
<html>
<head>
<title>web前端开发的基础知识</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
margin:50pxauto;
transition-property:all;
transition-duration:2s;
transition-delay:3s;
background:red;
}
div:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

transition-timing-function

描述:规定速度效果的速度曲线。

  • linear: 规定均速的过渡效果。
  • ease: 规定先慢后快再慢的过渡效果。
  • ease-in: 规定先慢后快的过渡效果。
  • ease-out: 规定以先快后慢过渡效果。
  • ease-in-out: 规定先慢后快再慢的过渡效果,中间比ease的中间慢。
  • cubic-bezier(n,n,n,n): 在 cubic-bezier函数中定义自己的值。(实际用到的很少,可以到工具网站中设置值http://cubic-bezier.com/)

例子:

  • 展示不同类型的速度。

html 代码

<!DOCTYPE html>
<html>
<head>
<title>前端开发要具备哪些主要技能</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
li{
width:50px;
height:50px;
margin:10px0;
background-color:red;
color:#fff;
text-align:center;
}
ul:hoverli{
margin-left:500px;
}
.ease{
transition:all4sease;
}
.ease_in{
transition:all4sease-in;
}
.ease_out{
transition:all4sease-out;
}
.ease_in_out{
transition:all4sease-in-out;
}
.linear{
transition:all4slinear;
}
</style>
</head>
<body>
<ul>
<liclass=”ease”>ease</li>
<liclass=”ease_in”>ease-in</li>
<liclass=”ease_out”>ease-out</li>
<liclass=”ease_in_out”>ease-in-out</li>
<liclass=”linear”>linear</li>
</ul>
</body>
</html>

多个过渡动画

可以为同一元素的多个属性定义过渡效果,语法:

  1. 简写模式:
    transition: width .3s ease-in .2s , height .4s ease-out .3s
  2. 拆分方式:
    transition-property:width, height;
    transition-duration:.3s, .4s;
    transition-timing-function:ease-in,ease-out;
    transition-delay:.2s, .3s;

一般我们为一个元素设置多个过渡时,可以设置后面的过渡效果延迟于前面的过渡效果几秒后触发。

例子:

  • 设置延迟1秒后,在宽度改变完成后,开始高度的改变。

html 代码

<!DOCTYPE html>
<html>
<head>
<title>web前端开发应该会哪些?</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
margin:50pxauto;
transition: width 1s, height 1s1s;
background:red;
}
div:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

transition所支持的属性

*并不是所有的CSS属性都支持transition,transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,如果开始或结束的设置是height: auto,页面的自适应宽度,当浏览器改变宽度时,那么就不会产生动画效果。

实际运用需要注意的

  • transition不会在页面加载时自动执行动画。它需要事件去触发。我们可以使用CSS的伪元素,比如:hover,也可以使用js触发事件去执行动画。
  • transition已经可以很安全地不加浏览器前缀,各大浏览器(包括IE 10)都已经支持无前缀的transition。
  • 解决webkit浏览器下,transtion造成的闪动问题:

html 代码

 

  • 开启硬件加速,可以使transition运行更加流畅:

html 代码

body {
-webkit-transform:translate3d(0,0,0);
}

h5动画制作 web前端开发|前端动画都是用什么开发

» 本文来自:前端开发者 » 《前端开发的动画实例_教你入门CSS_Transition》
» 本文链接地址:https://www.rokub.com/3507.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!