最近没有做什么技术实验,因为有比较重要的事情忙还感冒了,所以为了补一下网站更新频率,过来敷衍一下顺便学习一下css的三个做动画的元素

transform

transfrom取值:
none
无转换

matrix(,,,,,)
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate([, ])
指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translateX()
指定对象X轴(水平方向)的平移

translateY()
指定对象Y轴(垂直方向)的平移

rotate()
指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义

scale([, ])
指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX()
指定对象X轴的(水平方向)缩放

scaleY()
指定对象Y轴的(垂直方向)缩放

skew( [, ])
指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewX()
指定对象X轴的(水平方向)扭曲

skewY()
指定对象Y轴的(垂直方向)扭曲

transform-origin

取值:

<percentage>
用百分比指定坐标值。可以为负值。

<length>
用长度值指定坐标值。可以为负值。

left
指定原点的横坐标为left

center①
指定原点的横坐标为center

right
指定原点的横坐标为right

top
指定原点的纵坐标为top

center②
指定原点的纵坐标为center

bottom
指定原点的纵坐标为bottom

说明
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

transition

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

[ transition-property ]
检索或设置对象中的参与过渡的属性

[ transition-duration ]
检索或设置对象过渡的持续时间

[ transition-timing-function ]
检索或设置对象中过渡的动画类型
linear:
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:
等同于 steps(1, start)
step-end:
等同于 steps(1, end)
steps([, [ start | end ] ]?):
接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(, , , ):
特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

[ transition-delay ]
检索或设置对象延迟过渡的时间

animation

[ animation-name ]
检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
指定动画名称和动画效果。
@keyframes定义的动画名称用来被animation-name所使用。
定义动画时,简单的动画可以直接使用关键字from和to,即从一种状态过渡到另一种状态:
示例代码:

@keyframes testanimations {
	from { opacity: 1; }
	to { opacity: 0; }
}

如果复杂的动画,可以混合去设置某个时间段内的任意时间点的样式:
示例代码:

@keyframes testanimations {
	from { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20); }
	80% { transform: translate(80px, 0); }
	to { transform: translate(100px, 20px); }
}

当然,也可以不适用关键字from和to,而都使用
示例代码:

@keyframes testanimations{
	0% { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20px); }
	80% { transform: translate(80px, 0); }
	100% { transform: translate(100px, 20px); }
}

[ animation-duration ]
检索或设置对象动画的持续时间

[ animation-timing-function ]
检索或设置对象动画的过渡类型
linear:
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:
等同于 steps(1, start)
step-end:
等同于 steps(1, end)
steps([, [ start | end ] ]?):
接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(, , , ):
特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

[ animation-delay ]
检索或设置对象动画延迟的时间

[ animation-iteration-count ]
检索或设置对象动画的循环次数

[ animation-direction ]
检索或设置对象动画在循环中是否反向运动

[ animation-play-state ]
检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式
取值:
running:
运动
paused:
暂停

[animation-fill-mode]:
检索或设置对象动画时间之外的状态
none:
默认值。不设置对象动画之外的状态
forwards:
设置对象状态为动画结束时的状态
backwards:
设置对象状态为动画开始时的状态
both:
设置对象状态为动画结束或开始的状态

「Unity Shaders」Surface Shaders and Texture Mapping

 本文内容参考《Unity 5.x Shaders and Effects Cookbook》 表面着色器和材质贴图 总的来说,一个表面着色器有两个关键的步骤。第一,必须确定材质的物理...

阅读全文

「Unity Shaders」Creating First Shader

创建第一个着色器 最近学习了一段时间Unity Shader相关知识,在进一步自顶向下学习计算机图形学之前,先将之前看《Unity 5.x Shaders and Effects Cookbook...

阅读全文

《Effective c++》、《Inside C++ Model》 小结(一)

最近瞻仰了一下Scott Meyers久负盛名的《effective c++》,特来总结一下,以加深一下印象与防止自己今后记忆力衰退。这本书里很多都是工程上很有意思的tips...

阅读全文

欢迎留言