Properties that are not animating are ignored in this rule, with the exception of the -webkit-animation-timing-function property. The keyframe declaration consists of properties and values. The keyword to is equivalent to the value 100. The keyword from is equivalent to the value 0. The keyframes are specified by the block of property values declared for the selector. The selector is used to specify the percentage along the duration of the animation or transition that the keyframes represent. The keyframes selector consists of a list of percentage values or the keywords from or to. You set the animation name using the -webkit-animation-name property. The keyword is followed by the name of the target animation and a set of style rules following the syntax above. Support LevelĬSS 3 keyframes for CSS visual effect animation properties. Here is the syntax for these queries: SyntaxĪpplies only to browsers that support animations specified with -webkit-animation.Īpplies only to devices with the specified maximum height.Īpplies only to devices with the specified maximum width.Īpplies only to devices with the specified minimum height.Īpplies only to devices with the specified minimum width.Īpplies only to browsers that support transitions specified with -webkit-transition.Īpplies only to devices with the specified ratio where a value of 2 indicates Retina displays and 1 indicates standard displays.Īpplies only to devices with the specified maximum ratio where 2 indicates Retina displays and 1 indicates standard displays.Īpplies only to devices with the specified minimum ratio where 2 indicates Retina displays and 1 indicates standard displays.Īvailable in iOS 1.0 and later. For example, you might have styles specific to print media. AvailabilityĬSS 2 CSS properties specific to a given output medium. If you remove these properties, the last font definition is used and the text appears in an oblique font (slanted).įor a list of specific values allowed for each of these properties, see the description for the property in question. For example:īecause the font-style property is specified for both font definitions, the browser uses the first entry for normal text and the second entry for oblique text, and thus, the text “This is a test.” is displayed normally (vertically). The remaining properties tell the browser how to choose between multiple variants in the same font family. ![]() This hint is intended to help the browser avoid downloading fonts in formats that it does not support. In the src property, you can specify any number of local font family names and any number of URLs (provided that you include at least one local name or URL, of course).įor each URL, you can also specify a format hint if desired. For each of these properties, you can specify either a single value or a comma-separated list containing multiple values. The only required properties are font-family and src. The font will match for all possible values of the corresponding property. Font-family: "MyFamilyname", cursive įont-stretch: condensed /* Not supported */įont-size: 12pt /* Not supported */ ![]() You can specify a particular property as we have above, or use a value of all to refer to transition properties. Notice, too, that we told the browser that the transition should take two seconds and follow and ease-out timing function, which means the transition starts fast, then slows down towards the end. That tells the browser that we’re planning to transition background colors and nothing else when a transition occurs between hovered and non-hovered states. ![]() Notice that we’ve called out the background-color property in the transition declaration. CodePen Embed Fallback Specifying which properties to transition
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |