CSS3中怎么控制HTML元素动画效果
这篇文章将为大家详细讲解有关CSS3中怎么控制HTML元素动画效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
1.对元素transform的控制
代码如下:
<head>
<style>
.showbox{
float: left;
margin:4em 1em;
width:100px;
height:60px;
borer:2px solid green;
background-color:#000;
text-align:center;
-webkit-transition: 1s ease-in-out;
transition:1s ease-in-out;
}
.sliderright:hover{
-webkit-transform:translate(30em, 0);
transform:translate(30em, 0);
}
</style>
</head>
<body>
<div class='showbox sliderright'>
</div>
</body>
CSS3中，元素可以具有如下的transform-control属性：
-webkit-transform: translate(3em,0);
-webkit-transform: rotate(30deg);
-webkit-transform: scale(1.5);
通过恰当的变换，最终可以将元素的位置变化成为我们需要的效果。
2.CSS3的动画属性
CSS3中元素的所有均由下面的属性控制
代码如下:
-webkit-transition: 1s ease-in-out;
实际上，这个css属性控制了在元素的style发生变化的时候应该怎样改变那些数值，一些可以连续变化的style，诸如opacity，color，width等等都可以在这样的属性控制下进行动画
3.动画的多时间点控制
我们可以逐点控制动画，放上另一个例子：
代码如下:
<head> <style> .box{ position:relative; width:100px; height:100px; left:0; top:0; background:blue; -webkit-transition-property: width, height, left, top, background, -webkit-transform; -webkit-transition-duration: 1s, 1s, 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay:1s, 1s, 0, 0, 0, 1s; } .box:hover{ width:50px; height:50px; left:150px; top:150px; background:red; -webkit-transform:rotate(360deg); } </style> </head> <body> <div style='height:250px;width:250px;background:grey'> <div class='box'> </div> </div> </body>在上面的例子中，-webkit-transition-property控制了动画需要控制那些style属性，duration和delay控制时间节点，timeing function控制了是不是需要淡入淡出的效果。
4.如何让一个元素的hover动作触发另一个元素的动画？
我们可以使用CSS属性的一些链接符号，如下面的例子中，使用~号，在label1的hover动作触发的时候，会影响到label2，然后触发label2的动画
<head>
<style>
.box1{
position:absolute;
background:red;
width:100px;
height:100px;
top:0;
left:0;
}
.box1:hover ~ .box2{
left:500px;
}
.box2{
position:absolute;
width:100px;
height:100px;
left:120px;
top:0;
background:blue;
-webkit-transition: 1s ease-in-out;
}
</style>
</head>
<body>
<div style='height:100px;width:400px;background:grey'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
</body>关于CSS3中怎么控制HTML元素动画效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
