transition transform animate的使用

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

• 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