本文整理汇总了TypeScript中@uifabric/merge-styles/lib/index.keyframes函数的典型用法代码示例。如果您正苦于以下问题：TypeScript keyframes函数的具体用法？TypeScript keyframes怎么用？TypeScript keyframes使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了keyframes函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: _continuousPulseAnimationDouble
function _continuousPulseAnimationDouble(
beaconColorOne: string,
beaconColorTwo: string,
innerDimension: string,
outerDimension: string,
borderWidth: string
): string {
return keyframes({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'1.42%': _continuousPulseStepTwo(borderWidth),
'3.57%': _continuousPulseStepThree(),
'7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'31.42%': _continuousPulseStepTwo(borderWidth),
'33.57%': _continuousPulseStepThree(),
'37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
'81.85': _continuousPulseStepTwo(borderWidth),
'83.42': _continuousPulseStepThree(),
'87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {}
});
}示例2: _continuousPulseAnimationSingle
function _continuousPulseAnimationSingle(
beaconColorOne: string,
beaconColorTwo: string,
innerDimension: string,
outerDimension: string,
borderWidth: string
): string {
return keyframes({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'14.2%': _continuousPulseStepTwo(borderWidth),
'35.7%': _continuousPulseStepThree(),
'71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {}
});
}示例3: _createSlideInX
function _createSlideInX(fromX: number): string {
return keyframes({
from: { transform: `translate3d(${fromX}px,0,0)` },
to: { transform: `translate3d(0,0,0)` }
});
}示例4: _createSlideOutY
function _createSlideOutY(toY: number): string {
return keyframes({
from: { transform: `translate3d(0,0,0)` },
to: { transform: `translate3d(0,${toY}px,0)` }
});
}示例5: keyframes
import { IAnimationStyles } from '../interfaces/index';
import { IRawStyle, keyframes } from '@uifabric/merge-styles/lib/index';
/* Register the keyframes */
const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
const DURATION_1 = '0.167s';
const DURATION_2 = '0.267s';
const DURATION_3 = '0.367s';
const DURATION_4 = '0.467s';
const FADE_IN: string = keyframes({
from: { opacity: 0 },
to: { opacity: 1 }
});
const FADE_OUT: string = keyframes({
from: { opacity: 1 },
to: { opacity: 0 }
});
const SLIDE_RIGHT_IN10: string = _createSlideInX(-10);
const SLIDE_RIGHT_IN20: string = _createSlideInX(-20);
const SLIDE_RIGHT_IN40: string = _createSlideInX(-40);
const SLIDE_RIGHT_IN400: string = _createSlideInX(-400);
const SLIDE_LEFT_IN10: string = _createSlideInX(10);
const SLIDE_LEFT_IN20: string = _createSlideInX(20);
const SLIDE_LEFT_IN40: string = _createSlideInX(40);
const SLIDE_LEFT_IN400: string = _createSlideInX(400);
const SLIDE_UP_IN10: string = _createSlideInY(10);