transition [英]trænˈzɪʃn [美]trænˈzɪʃən, -ˈsɪʃ- n. 过渡，转变，变迁;[语]转换;[乐]变调 [例句]That was a big transition for me.这于我而言可是个巨大的转变。
CSS animation 与 CSS transition 有何区别
一、指代不同1、animation ：属性是一个简写属性，用于设置六个动画属性。2、transition：属性是一个简写属性，用于设置四个过渡属性。
二、特点不同1、animation ：animation: name duration timing-function delay iteration-count direction;规定需要绑定到选择器的 keyframe 名称。
规定完成动画所花费的时间，以秒或毫秒计。2、transition：transition: property duration timing-function delay;规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。三、要求不同1、animation ：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
2、transition：始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
transition、-moz-transition、-webkit-transition、-o-transition是什么意思？怎样用？
1、transition代表css3中的过渡，可以使元素从一种样式逐渐改变为另一种的效果。2、transition: height 2s;表示需要渐变的是元素高度height,渐变时间是2s。
transition还有其他参数如下图：3、-moz-,-webkit-,-o-这三个是厂商前缀，不同浏览的厂商,因为不同浏览器有不同的标准，所以为了兼容性，需要把常用的浏览器对应的厂商前缀加上。
所以四个属性代表的是一个意思。-moz- 是火狐浏览器厂商前缀-webkit- 是谷歌浏览器厂商前缀-o- 是opera浏览器厂商前缀4、div {width:100px;height:30px;background:blue;transition:width 2s;-moz-transition:height 2s; /* Firefox 4 */-webkit-transition:height 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}这句话的意思是：1）设置一个div元素，宽度100px，高度30px，背景是蓝色，设置过渡效果2s。2）当浏览器是火狐、Safari(mac自带浏览器)、谷歌(Chrome)时，触发高度变化时产生2s的渐变效果。3）当浏览器是除上一句话中的浏览器之外时，触发宽度变化时产生2s的渐变效果。
5、用法：需要一个触发渐变效果的产生的条件。比如：div:hover {height:100px}这个意思是说，当鼠标悬停在元素div上时，会触发div元素高度渐变2s内会变为100px;但是当鼠标移出时，div的高度同样会在2秒内恢复为30px。扩展资料：相关语言标准：在CSS 2.1规范中，识别符（包括选择符中的元素名、类、ID）只能包含A～Z、a～z、0～9等字符，加上连字符“-”、下划线“_”。
识别符不能以数字开头，以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时，其他元素名称、类和ID标识符也不允许用连字符开头。
CSS的识别符也需要用反斜杠“\”规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种：第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，“AT&T”变为“AT\&T”；另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，“AT&T”变为“AT\26T”。
留言评论