transition transform animate的使用

最新推荐文章于 2024-01-18 08:59:30 发布

转载最新推荐文章于 2024-01-18 08:59:30 发布 · 90 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/171220-barney/p/8580631.html

本文详细介绍了CSS中过渡（transition）和动画（animate）的基本概念及使用方法。过渡包括四个关键属性：transition-property、transition-duration、transition-timing-function 和 transition-delay。文章还解释了变换（transform）的效果，并通过实例展示了如何利用@keyframes实现复杂的动画效果。

注：代码显示效果可以自行粘贴复制查看

transition(过渡)，主要是关注property的变化主要有四个属性transition-property、transition-durantion、transition-timing-function、transition-delay，transition是对这四个属性的简写
transition-property：要过渡的元素
transition-durantion：过渡持续的事件
transition-timing-function：过渡的速度，ease(慢开始然后中间块结束慢)，ease-in（慢开始），ease-out（慢结束），ease-in-out（慢开始慢结束），cubic-bezier

<div class="transition-test"></div>
<style>
.transition-test{
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
            
    /*transition: width 3s ease,background-color 3s ease;*///如果要过渡的元素的过渡方式不同就用这种写法
    transition:all 3s ease;//填写顺序是transition-property(必填）、transition-durantion（必填，不然没有过渡效果）、transition-timing-function、transition-delay
}
.transition-test:hover{
    width:100%;
    background-color: yellow;
}
</style>

transform（变换）translate(x,y) rotate() scale() skew() martix() 还有其他的3d效果在：http://www.w3school.com.cn/css3/css3_2dtransform.asp

<div>你好。这是一个 div 元素。</div>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transition:all 3s;
}
div:hover
{
transform:rotate(360deg);
}
</style>

你好。这是一个 div 元素。

animate（动画）有如下属性：
@keyframes捆绑到某个选择器
animation：除了animation-play-state之外的属性的其他所有属性的简写
animation-name：固定@keyframes动画的名称
animation-duration：完成一个周期所用时长
animation-timing-function：速度曲线，默认时ease
animation-delay：动画何时开始
animation-count：动画播放次数
animation-direction：下一动画是否逆向播放
animation-paly-state：动画的显示状态运行还是暂停
animation-fill-mode：动画之外的状态

<div></div>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear infinite alternate;
animation-play-state:running;

}
@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;}
}
</style>

转载于:https://www.cnblogs.com/171220-barney/p/8580631.html