网页制作案例教程HTML5 CSS3 试题及答案 项目10 CSS3过渡 变形和动画效果

一、单选题1、transition-duration属性能够设置什么内容？A、完成过渡所使用的方法B、具体的线路函数C、完成过渡所使用的时间D、完成过渡的延迟时间答案：C

2、过渡属性（transition-property）中想要指定所有元素支持transition-property属性的样式，应该使用什么属性值？A、nameB、allC、IDENTD、width答案：B

3、ease-in-out这个属性值的意思是?A、动画从头到尾的速度是相同的。B、动画以低速开始和结束。C、动画以低速开始。D、默认。动画以低速开始，然后加快，在结束前变慢。答案：B

4、动画设置轮流反向播放应该使用如下那个属性？A、animation-fill-modeB、animation-timing-functionC、animation-directionD、animation-play-state答案：C5、在CSS中，哪个属性用于定义过渡效果？A.transitionB.animationC.transformD.move答案：A6、过渡效果可以应用于哪些CSS属性？A.仅颜色B.仅宽度和高度C.大部分CSS属性D.无法确定答案：C7、CSS的transition-duration属性用于设置什么？A.过渡效果的名称B.过渡效果开始前的延迟时间C.过渡效果的持续时间D.过渡效果的速度曲线答案：C8、CSS的transform属性主要用于什么？A.改变元素的位置B.对元素进行2D或3D转换C.创建动画效果D.改变元素的背景色答案：B9、如何使用CSS将一个元素沿X轴旋转45度？A.transform:rotate(45deg);B.transform:rotateX(45deg);C.transform:rotateY(45deg);D.transform:rotateZ(45deg);答案：A（注意：虽然存在rotateX和rotateY，但rotate默认是绕Z轴旋转）10、如何使用CSS将元素沿X轴平移100px？A.transform:translateX(100px);B.transform:translate(100px);C.transform:moveX(100px);D.transform:shiftX(100px);答案：A11、CSS的@keyframes规则用于什么？A.定义过渡效果B.定义变形效果C.定义动画效果D.定义元素的尺寸答案：C12、如何设置动画的持续时间？A.animation-durationB.animation-timeC.animation-speedD.animation-length答案：A13、如何设置动画开始前的延迟时间？A.animation-delayB.animation-waitC.animation-time-offsetD.animation-lag答案：A14、如何设置动画的迭代次数？A.animation-iterationB.animation-repeatC.animation-countD.animation-loop答案：C15、如何设置动画的播放状态？A.animation-playB.animation-stateC.animation-play-stateD.animation-run答案：C16、如何将多个动画效果应用到一个元素上？A.使用逗号分隔的动画名称B.使用空格分隔的动画名称C.使用分号分隔的动画名称D.使用animation属性的多个值答案：A17、CSS的transform-origin属性用于设置什么？A.变形效果的起点B.变形效果的终点C.元素的位置D.元素的背景色答案：A18、如何使用CSS将一个元素沿Y轴缩放1.5倍？A.transform:scaleY(1.5);B.transform:scale(1.5);C.transform:resizeY(1.5);D.transform:zoomY(1.5);答案：A19、CSS的animation-fill-mode属性用于设置什么？A.动画的播放速度B.动画的迭代次数C.动画在播放前后的状态D.动画的播放方向答案：C20、如何创建一个无限循环的动画？A.animation-iteration-count:infinite;B.animation-repeat:infinite;C.animation-loop:true;D.animation-count:-1;答案：A21、如何设置动画的播放方向为反向？A.animation-direction:reverse;B.animation-play-direction:backward;C.animation-flow:reverse;D.animation-order:backward;答案：A二、多选题1、CSS的transition属性可以包含哪些子属性？A.transition-propertyB.transition-durationC.transition-timing-functionD.transition-delay答案：ABCD2、哪些CSS属性通常支持过渡效果？A.widthB.heightC.background-colorD.border-radius答案：ABCD3、下列哪些方法可以用于创建CSS动画？A.使用@keyframes规则B.使用transition属性C.使用animation属性D.使用<animate>标签答案：AC4、CSS的transform属性支持哪些变形操作？A.旋转（Rotate）B.缩放（Scale）C.倾斜（Skew）D.透明度（Opacity）答案：AB,C5、关于CSS动画，以下哪些说法是正确的？A.动画可以循环播放B.动画可以暂停和恢复C.动画只能应用于一个CSS属性D.动画可以设置不同的速度曲线答案：ABD6、下列哪些CSS属性可以用于设置transform-origin的值？A.像素值（如50px）B.百分比值（如50%）C.关键字（如top、right、bottom、left、center）D.颜色值（如red）答案：ABC7、CSS的animation-direction属性可以设置为哪些值？A.normalB.reverseC.alternateD.alternate-reverse答案：ABCD8、关于CSS过渡和动画，以下哪些说法是正确的？A.过渡和动画都可以产生平滑的视觉效果B.过渡和动画都需要使用@keyframes规则C.过渡是动画的一种简化形式D.过渡和动画都可以通过JavaScript进行控制答案：ACD9、CSS的transition-timing-function属性可以设置为哪些值？A.linearB.easeC.ease-inD.cubic-bezi