码迷,mamicode.com
首页 > Web开发 > 详细

css3用到知识点小结

时间:2019-02-22 18:17:05      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:near   .com   lin   code   strong   默认值   需要   延迟   效果   

属性

默认值

属性值及其描述

animation-name

 

默认值:none

规定需要绑定到选择器的 keyframe 名称。

keyframename

规定需要绑定到选择器的 keyframe 的名称。

none

规定无动画效果(可用于覆盖来自级联的动画)。

animation-duration

默认值:0

规定完成动画所花费的时间,以秒或毫秒计。

time

规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。

animation-timing-function

默认值:ease

规定动画的速度曲线。

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay

默认值:0

规定在动画开始之前的延迟。

time

可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。

animation-iteration-count

默认值:1

规定动画应该播放的次数。

n

定义动画播放次数的数值。

infinite

规定动画应该无限次播放。

 

animation-direction

 

normal|alternate

规定是否应该轮流反向播放动画。

normal

默认值。动画应该正常播放。

alternate

动画应该轮流反向播放。

 

 

简单例子:

<p className=‘second‘>animation以及transform的使用</p>
 
.second{
color: #fff;
background-color: #fac;
animation:myfirst 5s infinite;
margin-top:60px;
transform:rotate(9deg);//倾斜(角度)
// transform: translate(10px,20px);//位移(x,y)
// transform: scale(2,1.5);//缩放(宽,高)
}
效果如下:
技术图片(颜色在变化)

 

css3用到知识点小结

标签:near   .com   lin   code   strong   默认值   需要   延迟   效果   

原文地址:https://www.cnblogs.com/cherishnow/p/10414418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!