ଏହାକୁ ଚିତ୍ର କରନ୍ତୁ: ଆପଣ ଏକ ନୂତନ ପ୍ରୋଜେକ୍ଟରେ ଯୋଗ ଦିଅନ୍ତି, କୋଡବେସରେ ବୁଡ଼ନ୍ତୁ, ଏବଂ ପ୍ରଥମ କିଛି ଘଣ୍ଟା ମଧ୍ୟରେ, ଆପଣ କିଛି ନ frustr ରାଶ୍ୟଜନକ ଭାବରେ ପରିଚିତ କିଛି ଆବିଷ୍କାର କରନ୍ତି | ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଗୁଡିକରେ ବିସ୍ତୃତ, ସମାନ ମ basic ଳିକ ଆନିମେସନ୍ ପାଇଁ ଆପଣ ଏକାଧିକ @ କିଫ୍ରାମ୍ ସଂଜ୍ଞା ଖୋଜନ୍ତି | ତିନୋଟି ଭିନ୍ନ ଫ୍ୟାଡ୍-ଇନ୍ ଇଫେକ୍ଟ, ଦୁଇ କିମ୍ବା ତିନୋଟି ସ୍ଲାଇଡ୍ ଭେରିଏସନ, ମୁଠାଏ ଜୁମ୍ ଆନିମେସନ୍ ଏବଂ ଅତି କମରେ ଦୁଇଟି ଭିନ୍ନ ସ୍ପିନ୍ ଆନିମେସନ୍ କାରଣ, ଭଲ, କାହିଁକି ନୁହେଁ? @keyframes ନାଡ { ରୁ { ମାପ: 1; } to { ମାପ: 1.1; } }
@keyframes ବଡ-ପଲ୍ସ { 0%, 20%, 100% { ମାପ: 1; } 10%, 40% { ମାପ: 1.2; } }
ଯଦି ଏହି ଦୃଶ୍ୟଟି ପରିଚିତ ଲାଗେ, ଆପଣ ଏକା ନୁହଁନ୍ତି | ବିଭିନ୍ନ ପ୍ରୋଜେକ୍ଟଗୁଡିକରେ ମୋର ଅଭିଜ୍ In ତାରେ, ସବୁଠାରୁ ନିରନ୍ତର ଦ୍ରୁତ ବିଜୟ ମଧ୍ୟରୁ ଗୋଟିଏ ହେଉଛି କିଫ୍ରେମ୍ଗୁଡ଼ିକୁ ଏକୀକରଣ ଏବଂ ମାନକ କରିବା | ଏହା ଏପରି ଏକ ନିର୍ଭରଯୋଗ୍ୟ pattern ାଞ୍ଚାରେ ପରିଣତ ହୋଇଛି ଯେ ମୁଁ ବର୍ତ୍ତମାନ ଏହି ସଫେଇ କାର୍ଯ୍ୟକୁ ଯେକ new ଣସି ନୂତନ କୋଡବେସରେ ମୋର ପ୍ରଥମ କାର୍ଯ୍ୟ ଭାବରେ ଅପେକ୍ଷା କରିଛି | ବିଶୃଙ୍ଖଳା ପଛରେ ଥିବା ତର୍କ | ଯେତେବେଳେ ତୁମେ ଏହା ବିଷୟରେ ଚିନ୍ତା କର, ଏହି ଅନାବଶ୍ୟକତା ସମ୍ପୂର୍ଣ୍ଣ ଅର୍ଥ ପ୍ରଦାନ କରେ | ଆମେ ସମସ୍ତେ ଆମର ଦ work ନନ୍ଦିନ କାର୍ଯ୍ୟରେ ସମାନ ମ fundamental ଳିକ ଆନିମେସନ୍ ବ୍ୟବହାର କରୁ: ମଳିନ, ସ୍ଲାଇଡ୍, ଜୁମ୍, ସ୍ପିନ୍ ଏବଂ ଅନ୍ୟାନ୍ୟ ସାଧାରଣ ପ୍ରଭାବ | ଏହି ଆନିମେସନ୍ ଗୁଡିକ ବହୁତ ସରଳ, ଏବଂ କାର୍ଯ୍ୟ ସରିବା ପାଇଁ ଶୀଘ୍ର @ କିଫ୍ରାମ୍ ସଂଜ୍ଞା ଚପାଇବା ସହଜ | ଏକ କେନ୍ଦ୍ରୀଭୂତ ଆନିମେସନ୍ ସିଷ୍ଟମ୍ ବିନା, ଡେଭଲପର୍ମାନେ ସ୍ key ାଭାବିକ ଭାବରେ ଏହି କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ଆରମ୍ଭରୁ ଲେଖନ୍ତି, ଜାଣି ନଥିବେ ଯେ ସମାନ ଆନିମେସନ୍ ଗୁଡିକ କୋଡବେସରେ ଅନ୍ୟ କେଉଁଠାରେ ଅଛି | ଉପାଦାନ-ଆଧାରିତ ସ୍ଥାପତ୍ୟରେ କାର୍ଯ୍ୟ କରିବାବେଳେ ଏହା ବିଶେଷ ଭାବରେ ସାଧାରଣ (ଯାହା ଆମମାନଙ୍କ ମଧ୍ୟରୁ ଅଧିକାଂଶ ଆଜିକାଲି କରନ୍ତି), କାରଣ ଦଳଗୁଡ଼ିକ ପ୍ରାୟତ application ପ୍ରୟୋଗର ବିଭିନ୍ନ ଅଂଶରେ ସମାନ୍ତରାଳ ଭାବରେ କାର୍ଯ୍ୟ କରନ୍ତି | ଫଳାଫଳ? ଆନିମେସନ୍ ବିଶୃଙ୍ଖଳା | ଛୋଟ ସମସ୍ୟା କୀଫ୍ରେମ୍ ନକଲ ସହିତ ସବୁଠାରୁ ସ୍ପଷ୍ଟ ବିଷୟଗୁଡ଼ିକ ହେଉଛି ବିକାଶ ସମୟ ଏବଂ ଅନାବଶ୍ୟକ କୋଡ୍ ବ୍ଲାଟ୍ | ଏକାଧିକ କିଫ୍ରେମ୍ ସଂଜ୍ଞା ଅର୍ଥ ଆବଶ୍ୟକତା ପରିବର୍ତ୍ତନ ହେଲେ ଅପଡେଟ୍ କରିବାକୁ ଏକାଧିକ ସ୍ଥାନ | ତୁମର ଦୁର୍ବଳ ଆନିମେସନ୍ ର ସମୟ ସଜାଡିବା ଆବଶ୍ୟକ କି? ତୁମ କୋଡବେସ୍ ଉପରେ ପ୍ରତ୍ୟେକ ଉଦାହରଣକୁ ଶିକାର କରିବାକୁ ପଡିବ | ସହଜ କାର୍ଯ୍ୟଗୁଡ଼ିକୁ ମାନକ କରିବାକୁ ଚାହୁଁଛନ୍ତି କି? ସମସ୍ତ ପରିବର୍ତ୍ତନ ଖୋଜିବାର ଶୁଭଫଳ | ରକ୍ଷଣାବେକ୍ଷଣ ପଏଣ୍ଟଗୁଡିକର ଏହି ଗୁଣନ ଏପରିକି ସରଳ ଆନିମେସନ୍ ଏକ ସମୟ ସାପେକ୍ଷ କାର୍ଯ୍ୟ କରିଥାଏ | ବଡ ସମସ୍ୟା ଏହି କିଫ୍ରେମଗୁଡିକର ନକଲ, ଭୂପୃଷ୍ଠରେ ଲୁଚି ରହିଥିବା ଏକ ଅଧିକ ଗୁପ୍ତ ସମସ୍ୟା ସୃଷ୍ଟି କରେ: ବିଶ୍ୱସ୍ତରୀୟ ଜାଲ | ଉପାଦାନ-ଆଧାରିତ ସ୍ଥାପତ୍ୟ ସହିତ କାର୍ଯ୍ୟ କରିବାବେଳେ ମଧ୍ୟ CSS କିଫ୍ରେମଗୁଡ଼ିକ ସର୍ବଦା ବିଶ୍ୱ ପରିସରରେ ବ୍ୟାଖ୍ୟା କରାଯାଇଥାଏ | ଏହାର ଅର୍ଥ ସମସ୍ତ କୀ ଫ୍ରେମ୍ ସମସ୍ତ ଉପାଦାନ ପାଇଁ ପ୍ରଯୁଜ୍ୟ | ସର୍ବଦା | ହଁ, ତୁମର ଆନିମେସନ୍ ତୁମର ଉପାଦାନରେ ବ୍ୟାଖ୍ୟା କରିଥିବା କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ଅବଶ୍ୟ ବ୍ୟବହାର କରେ ନାହିଁ | ଏହା ଶେଷ କିଫ୍ରାମ୍ ବ୍ୟବହାର କରେ ଯାହା ସେହି ସମାନ ନାମ ସହିତ ମେଳ ଖାଏ ଯାହା ବିଶ୍ୱ ପରିସରରେ ଲୋଡ୍ ହୋଇଥିଲା | ଯେପର୍ଯ୍ୟନ୍ତ ଆପଣଙ୍କର ସମସ୍ତ କିଫ୍ରାମ୍ ସମାନ, ଏହା ଏକ ଛୋଟ ସମସ୍ୟା ପରି ମନେହୁଏ | କିନ୍ତୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର ମାମଲା ପାଇଁ ଆପଣ ଏକ ଆନିମେସନ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ ଚାହୁଁଥିବା ମୁହୂର୍ତ୍ତରେ, ଆପଣ ଅସୁବିଧାରେ ଅଛନ୍ତି, କିମ୍ବା ଖରାପ, ଆପଣ ସେଗୁଡିକର କାରଣ ହେବେ | ହୁଏତ ଆପଣଙ୍କର ଆନିମେସନ୍ କାମ କରିବ ନାହିଁ କାରଣ ଆପଣଙ୍କ ପରେ ଲୋଡ୍ ହୋଇଥିବା ଅନ୍ୟ ଏକ ଉପାଦାନ, ଆପଣଙ୍କର କିଫ୍ରେମ୍ ଗୁଡିକୁ ଓଭର୍ ରାଇଟ୍ କରିବା, କିମ୍ବା ଆପଣଙ୍କର ଉପାଦାନ ଲୋଡ୍ ଶେଷ ଏବଂ ହଠାତ୍ ସେହି କୀଫ୍ରେମର ନାମ ବ୍ୟବହାର କରି ଅନ୍ୟ ସମସ୍ତ ଉପାଦାନ ପାଇଁ ଆନିମେସନ୍ ଆଚରଣ ପରିବର୍ତ୍ତନ କରେ, ଏବଂ ଆପଣ ଏହା ମଧ୍ୟ ଅନୁଭବ କରିପାରନ୍ତି ନାହିଁ | ଏଠାରେ ଏକ ସରଳ ଉଦାହରଣ ଅଛି ଯାହା ସମସ୍ୟାକୁ ଦର୍ଶାଏ: .component-one { / * ଉପାଦାନ ଶ yles ଳୀ * / ଆନିମେସନ୍: ପଲ୍ସ 1s ସହଜ-ଇନ୍-ଅସୀମ ବିକଳ୍ପ; }
/ * ଏହି @keyframes ସଂଜ୍ଞା କାମ କରିବ ନାହିଁ / / @keyframes ନାଡ { ରୁ { ମାପ: 1; } to { ମାପ: 1.1; } }
/ * ପରେ କୋଡ୍ ରେ ... * /
.component-two { / * ଉପାଦାନ ଶ yles ଳୀ * / ଆନିମେସନ୍: ପଲ୍ସ 1s ସହଜ-ଇନ୍-ଅସୀମ; }
/ * ଏହି କିଫ୍ରେମ୍ ଉଭୟ ଉପାଦାନ ପାଇଁ ପ୍ରଯୁଜ୍ୟ ହେବ * / @keyframes ନାଡ { 0%, 20%, 100% { ମାପ: 1; } 10%, 40% { ମାପ: 1.2; } }
ଉଭୟ ଉପାଦାନ ସମାନ ଆନିମେସନ୍ ନାମ ବ୍ୟବହାର କରନ୍ତି, କିନ୍ତୁ ଦ୍ୱିତୀୟ @ କିଫ୍ରାମ୍ ସଂଜ୍ଞା ପ୍ରଥମ ନାମକୁ ନବଲିଖନ କରେ | ବର୍ତ୍ତମାନ ଉଭୟ କମ୍ପୋନେଣ୍ଟ୍-ଏକ ଏବଂ କମ୍ପୋନେଣ୍ଟ୍-ଦ୍ୱିତୀୟ ଦ୍ key ିତୀୟ କିଫ୍ରେମ୍ ବ୍ୟବହାର କରିବ, କେଉଁ ଉପାଦାନ କେଉଁ କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ବ୍ୟାଖ୍ୟା କରେ ତାହା ଉପରେ ନିର୍ଭର କରେ | ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 1 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ସବୁଠାରୁ ଖରାପ ଅଂଶ? ଏହା ପ୍ରାୟତ local ସ୍ଥାନୀୟ ବିକାଶରେ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ କାର୍ଯ୍ୟ କରେ କିନ୍ତୁ ଉତ୍ପାଦନରେ ରହସ୍ୟମୟ ଭାବରେ ଭାଙ୍ଗିଯାଏ ଯେତେବେଳେ ନିର୍ମାଣ ପ୍ରକ୍ରିୟା ଆପଣଙ୍କ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଗୁଡିକର ଲୋଡିଂ କ୍ରମକୁ ପରିବର୍ତ୍ତନ କରେ | ଆପଣ ଆନିମେସନ୍ ସହିତ ଶେଷ ହୁଅନ୍ତି ଯାହା କେଉଁ ଉପାଦାନଗୁଡ଼ିକ ଲୋଡ୍ ହୋଇଛି ଏବଂ କେଉଁ କ୍ରମରେ ନିର୍ଭର କରେ ଭିନ୍ନ ଭାବରେ ଆଚରଣ କରେ | ସମାଧାନ: ୟୁନିଫାଏଡ୍ କିଫ୍ରାମ୍ | ଏହି ବିଶୃଙ୍ଖଳାର ଉତ୍ତର ଆଶ୍ଚର୍ଯ୍ୟଜନକ ଭାବରେ ସରଳ: ଏକ ଅଂଶୀଦାରୀ ଷ୍ଟାଇଲସିଟରେ ଗଚ୍ଛିତ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗତିଶୀଳ କିଫ୍ରାମ୍ | ପ୍ରତ୍ୟେକ ଉପାଦାନକୁ ନିଜସ୍ୱ ଆନିମେସନ୍ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଦେବା ପରିବର୍ତ୍ତେ, ଆମେ କେନ୍ଦ୍ରୀଭୂତ କିଫ୍ରାମ୍ ସୃଷ୍ଟି କରୁ ଯାହା ଭଲ ଭାବରେ ଡକ୍ୟୁମେଣ୍ଟ୍ ହୋଇଛି, ସହଜ |ବ୍ୟବହାର, ରକ୍ଷଣାବେକ୍ଷଣ ଏବଂ ତୁମର ପ୍ରକଳ୍ପର ନିର୍ଦ୍ଦିଷ୍ଟ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ପ୍ରସ୍ତୁତ | ଏହାକୁ କିଫ୍ରାମ୍ ଟୋକେନ୍ ଭାବରେ ଭାବନ୍ତୁ | ଯେପରି ଆମେ ରଙ୍ଗ ଏବଂ ବ୍ୟବଧାନ ପାଇଁ ଟୋକେନ୍ ବ୍ୟବହାର କରୁ, ଏବଂ ଆମମାନଙ୍କ ମଧ୍ୟରୁ ଅନେକ ଆନିମେସନ୍ ଗୁଣ ପାଇଁ ଟୋକେନ୍ ବ୍ୟବହାର କରନ୍ତି, ଯେପରି ଅବଧି ଏବଂ ସହଜ କାର୍ଯ୍ୟ, ତେବେ କିଫ୍ରେମ୍ ପାଇଁ ଟୋକେନ୍ କାହିଁକି ବ୍ୟବହାର କରୁନାହୁଁ? ଆପଣ ବ୍ୟବହାର କରୁଥିବା ଯେକ current ଣସି ସାମ୍ପ୍ରତିକ ଡିଜାଇନ୍ ଟୋକେନ୍ ୱାର୍କଫ୍ଲୋ ସହିତ ଏହି ପଦ୍ଧତି ସ୍ natural ାଭାବିକ ଭାବରେ ଏକୀଭୂତ ହୋଇପାରେ, ଯେତେବେଳେ ଉଭୟ ଛୋଟ ସମସ୍ୟା (କୋଡ୍ ନକଲ) ଏବଂ ବୃହତ ସମସ୍ୟା (ଗ୍ଲୋବାଲ୍ ସ୍କୋପ୍ ଦ୍ୱନ୍ଦ୍ୱ) କୁ ଗୋଟିଏ ଥର ସମାଧାନ କରିଥାଏ | ଧାରଣାଟି ସରଳ: ଆମର ସମସ୍ତ ସାଧାରଣ ଆନିମେସନ୍ ପାଇଁ ସତ୍ୟର ଏକକ ଉତ୍ସ ସୃଷ୍ଟି କରନ୍ତୁ | ଏହି ଅଂଶୀଦାରୀ ଷ୍ଟାଇଲସିଟ୍ ଯତ୍ନର ସହିତ ତିଆରି କିଫ୍ରେମ୍ଗୁଡ଼ିକୁ ଧାରଣ କରେ ଯାହା ଆମ ପ୍ରୋଜେକ୍ଟ ପ୍ରକୃତରେ ବ୍ୟବହାର କରୁଥିବା ଆନିମେସନ୍ s ାଞ୍ଚାଗୁଡ଼ିକୁ ଆବୃତ କରେ | ଆମର କୋଡବେସରେ କ ewhere ଣସି ସ୍ଥାନରେ ଏକ ଦୁର୍ବଳ ଆନିମେସନ୍ ବିଦ୍ୟମାନ ଅଛି କି ନାହିଁ ଆଉ ଅନୁମାନ କରିବା ନାହିଁ | ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକରୁ ଅଧିକ ହଠାତ୍ ଆନିମେସନ୍ ଓଭର୍ ରାଇଟ୍ କରନ୍ତୁ ନାହିଁ | କିନ୍ତୁ ଏଠାରେ ଚାବି ଅଛି: ଏଗୁଡ଼ିକ କେବଳ ଷ୍ଟାଟିକ୍ କପି-ପେଷ୍ଟ ଆନିମେସନ୍ ନୁହେଁ | ସେଗୁଡିକ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟିଜ୍ ମାଧ୍ୟମରେ ଗତିଶୀଳ ଏବଂ କଷ୍ଟମାଇଜେବଲ୍ ହେବା ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି, ଆମକୁ ସ୍ଥିରତା ବଜାୟ ରଖିବାକୁ ଅନୁମତି ଦେଇଥିବାବେଳେ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର କ୍ଷେତ୍ରରେ ଆନିମେସନ୍ ଆଡାପ୍ଟେସନ୍ ପାଇଁ ନମନୀୟତା ଅଛି, ଯେପରିକି ଯଦି ଆପଣ ଗୋଟିଏ ସ୍ଥାନରେ ଟିକିଏ ବଡ଼ “ନାଡ” ଆନିମେସନ୍ ଆବଶ୍ୟକ କରନ୍ତି | ପ୍ରଥମ କିଫ୍ରାମ୍ ଟୋକେନ୍ ନିର୍ମାଣ | ପ୍ରଥମ ନିମ୍ନମାନର ଫଳଗୁଡିକ ମଧ୍ୟରୁ ଗୋଟିଏ ହେଉଛି “ଫ୍ୟାଡ୍-ଇନ୍” ଆନିମେସନ୍ | ମୋର ସାମ୍ପ୍ରତିକ ପ୍ରୋଜେକ୍ଟ ମଧ୍ୟରୁ ଗୋଟିଏରେ, ମୁଁ ଏକ ଡଜନରୁ ଅଧିକ ଅଲଗା ଅଲଗା ସଂଜ୍ଞା ପାଇଲି, ଏବଂ ହଁ, ସେମାନେ ସମସ୍ତେ 0 ରୁ 1 ପର୍ଯ୍ୟନ୍ତ ସ୍ୱଚ୍ଛତାକୁ ଆନିମେସନ୍ କଲେ | ତେଣୁ, ଚାଲନ୍ତୁ ଏକ ନୂତନ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ସୃଷ୍ଟି କରିବା, ଏହାକୁ kf-tokens.css ବୋଲି କହିବା, ଏହାକୁ ଆମ ପ୍ରୋଜେକ୍ଟରେ ଆମଦାନୀ କରିବା ଏବଂ ଏହାର ସଠିକ୍ ମନ୍ତବ୍ୟ ସହିତ ଆମର କିଫ୍ରେମ୍ଗୁଡ଼ିକୁ ରଖିବା | / * keyframes-tokens.css * /
/ * * ଫ୍ୟାଡ୍ ଇନ୍ - ଫିଡ୍ ପ୍ରବେଶ ଆନିମେସନ୍ | * ବ୍ୟବହାର: ଆନିମେସନ୍: kf-fade-in 0.3s ସହଜ-ଆଉଟ୍; * / @keyframes kf-fade-in { ରୁ { ସ୍ୱଚ୍ଛତା: 0; } to { ସ୍ୱଚ୍ଛତା: 1; } }
ଏହି ଏକକ @ କିଫ୍ରାମ୍ ଘୋଷଣାନାମା ଆମ କୋଡବେସରେ ସେହି ସମସ୍ତ ବିସ୍ତୃତ ଫ୍ୟାଡ୍-ଇନ୍ ଆନିମେସନ୍ଗୁଡ଼ିକୁ ସ୍ଥାନିତ କରେ | ପରିଷ୍କାର, ସରଳ ଏବଂ ସର୍ବଭାରତୀୟ ସ୍ତରରେ ପ୍ରଯୁଜ୍ୟ | ଏବଂ ବର୍ତ୍ତମାନ ଯେହେତୁ ଆମର ଏହି ଟୋକନ୍ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି, ଆମେ ଏହାକୁ ଆମର ପ୍ରୋଜେକ୍ଟରେ ଯେକ any ଣସି ଉପାଦାନରୁ ବ୍ୟବହାର କରିପାରିବା: .modal { ଆନିମେସନ୍: kf-fade-in 0.3s ସହଜ-ଆଉଟ୍; }
.tooltip { ଆନିମେସନ୍: kf-fade-in 0.2s ସହଜ-ଇନ୍-ଆଉଟ୍; }
.notification { ଆନିମେସନ୍: kf-fade-in 0.5s ସହଜ-ଆଉଟ୍; }
ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଡେମୋ 2 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଟିପନ୍ତୁ: ଆମେ ଆମର ସମସ୍ତ @keyframes ନାମରେ ଏକ kf- ଉପସର୍ଗ ବ୍ୟବହାର କରୁଛୁ | ଏହି ଉପସର୍ଗ ଏକ ନାମ ସ୍ଥାନ ଭାବରେ କାର୍ଯ୍ୟ କରିଥାଏ ଯାହାକି ପ୍ରକଳ୍ପର ବିଦ୍ୟମାନ ଆନିମେସନ୍ ସହିତ ବିବାଦର ନାମକରଣକୁ ରୋକିଥାଏ ଏବଂ ତୁରନ୍ତ ଏହା ସ୍ପଷ୍ଟ କରେ ଯେ ଏହି କିଫ୍ରାମ୍ ଗୁଡିକ ଆମର କିଫ୍ରାମ୍ ଟୋକେନ୍ ଫାଇଲରୁ ଆସିଥାଏ | ଏକ ଡାଇନାମିକ୍ ସ୍ଲାଇଡ୍ ତିଆରି କରିବା | Kf-fade-in keyframes ବହୁତ ଭଲ କାମ କରେ କାରଣ ଏହା ସରଳ ଏବଂ ଜିନିଷଗୁଡିକୁ ଅଡୁଆରେ ପକାଇବାକୁ ଅଳ୍ପ ସ୍ଥାନ ଅଛି | ଅନ୍ୟାନ୍ୟ ଆନିମେସନ୍ରେ, ତଥାପି, ଆମକୁ ଅଧିକ ଗତିଶୀଳ ହେବାକୁ ପଡିବ, ଏବଂ ଏଠାରେ ଆମେ CSS କଷ୍ଟମ୍ ଗୁଣଗୁଡିକର ବିପୁଳ ଶକ୍ତି ଉପଯୋଗ କରିପାରିବା | ବିଛିନ୍ନ ଷ୍ଟାଟିକ୍ ଆନିମେସନ୍ ତୁଳନାରେ କିଫ୍ରେମ୍ ଟୋକେନ୍ଗୁଡ଼ିକ ପ୍ରକୃତରେ ଉଜ୍ଜ୍ୱଳ | ଏକ ସାଧାରଣ ଦୃଶ୍ୟ ଗ୍ରହଣ କରିବା: “ସ୍ଲାଇଡ୍-ଇନ୍” ଆନିମେସନ୍ | କିନ୍ତୁ କେଉଁଠାରୁ ସ୍ଲାଇଡ୍ କରନ୍ତୁ? ଡାହାଣରୁ 100px? ବାମରୁ 50%? ଏହା ପରଦାର ଉପରୁ ପ୍ରବେଶ କରିବା ଉଚିତ କି? କିମ୍ବା ବୋଧହୁଏ ତଳୁ ଭାସିବ? ଅନେକ ସମ୍ଭାବନା, କିନ୍ତୁ ପ୍ରତ୍ୟେକ ଦିଗ ଏବଂ ପ୍ରତ୍ୟେକ ପରିବର୍ତ୍ତନ ପାଇଁ ପୃଥକ କିଫ୍ରେମ୍ ସୃଷ୍ଟି କରିବା ପରିବର୍ତ୍ତେ, ଆମେ ଗୋଟିଏ ନମନୀୟ ଟୋକେନ୍ ନିର୍ମାଣ କରିପାରିବା ଯାହା ସମସ୍ତ ଦୃଶ୍ୟ ସହିତ ଖାପ ଖାଇଥାଏ: / * * ସ୍ଲାଇଡ୍ ଇନ୍ - ଦିଗ୍ଦର୍ଶନ ସ୍ଲାଇଡ୍ ଆନିମେସନ୍ | * ନିୟନ୍ତ୍ରଣ ଦିଗକୁ --kf- ସ୍ଲାଇଡ୍-ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: ବାମରୁ ସ୍ଲାଇଡ୍ (-100%) * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf- ସ୍ଲାଇଡ୍-ଇନ୍ 0.3s ସହଜ-ଆଉଟ୍; * --kf- ସ୍ଲାଇଡ୍-ରୁ: -100px 0; // ବାମରୁ ସ୍ଲାଇଡ୍ | * --kf- ସ୍ଲାଇଡ୍-ରୁ: 100px 0; // ଡାହାଣରୁ ସ୍ଲାଇଡ୍ | * --kf- ସ୍ଲାଇଡ୍-ରୁ: 0 -50px; // ଉପରୁ ସ୍ଲାଇଡ୍ | * /
@keyframes kf- ସ୍ଲାଇଡ୍-ଇନ୍ { ରୁ { ଅନୁବାଦ: var (- kf- ସ୍ଲାଇଡ୍-ରୁ, -100% 0); } to { ଅନୁବାଦ: 0 0; } }
ବର୍ତ୍ତମାନ - କଷ୍ଟମ୍ ପ୍ରପର୍ଟିରୁ --kf- ସ୍ଲାଇଡ୍ ପରିବର୍ତ୍ତନ କରି ଯେକ any ଣସି ସ୍ଲାଇଡ୍ ଦିଗ ପାଇଁ ଆମେ ଏହି ଏକକ @ କିଫ୍ରାମ୍ ଟୋକେନ୍ ବ୍ୟବହାର କରିପାରିବା: .sidebar { ଆନିମେସନ୍: kf- ସ୍ଲାଇଡ୍-ଇନ୍ 0.3s ସହଜ-ଆଉଟ୍; / * ଡିଫଲ୍ଟ ମୂଲ୍ୟ ବ୍ୟବହାର କରେ: ବାମରୁ ସ୍ଲାଇଡ୍ * / }
.notification { ଆନିମେସନ୍: kf- ସ୍ଲାଇଡ୍-ଇନ୍ 0.4s ସହଜ-ଆଉଟ୍; --kf- ସ୍ଲାଇଡ୍-ରୁ: 0 -50px; / * ଉପରୁ ସ୍ଲାଇଡ୍ * / }
.modal { ଆନିମେସନ୍: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf- ସ୍ଲାଇଡ୍-ରୁ: 50px 50px; / * ତଳ-ଡାହାଣରୁ ସ୍ଲାଇଡ୍ * / }
ସ୍ଥିରତା ବଜାୟ ରଖିବାବେଳେ ଏହି ପଦ୍ଧତି ଆମକୁ ଅବିଶ୍ୱସନୀୟ ନମନୀୟତା ପ୍ରଦାନ କରେ | ଗୋଟିଏ କିଫ୍ରେମ୍ ଘୋଷଣା, ଅସୀମ ସମ୍ଭାବନା | ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 3 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏବଂ ଯଦି ଆମେ ଆମର ଆନିମେସନ୍କୁ ଅଧିକ ନମନୀୟ କରିବାକୁ ଚାହୁଁ, “ସ୍ଲାଇଡ୍ ଆଉଟ୍” ଇଫେକ୍ଟ ପାଇଁ ଅନୁମତି ଦେଇ, ଆମେ କରିପାରିବା |ପରବର୍ତ୍ତୀ ବିଭାଗରେ ଯାହା ଦେଖିବା, ସେହି ପରି କଷ୍ଟମ୍ ପ୍ରପର୍ଟିରେ କେବଳ --kf- ସ୍ଲାଇଡ୍-ଯୋଡନ୍ତୁ | ଦ୍ୱି-ଦିଗୀୟ ଜୁମ୍ କିଫ୍ରାମ୍ | ଅନ୍ୟ ଏକ ସାଧାରଣ ଆନିମେସନ୍ ଯାହା ପ୍ରୋଜେକ୍ଟଗୁଡ଼ିକରେ ନକଲ ହୁଏ ତାହା ହେଉଛି “ଜୁମ୍” ଇଫେକ୍ଟ | ଟୋଷ୍ଟ ବାର୍ତ୍ତାଗୁଡ଼ିକ ପାଇଁ ଏହା ଏକ ସୂକ୍ଷ୍ମ ସ୍କେଲ-ଅପ, ମୋଡାଲ ପାଇଁ ଏକ ନାଟକୀୟ ଜୁମ୍-ଇନ୍, କିମ୍ବା ହେଡିଙ୍ଗ୍ ପାଇଁ ଏକ ମୃଦୁ ସ୍କେଲ୍-ଡାଉନ୍ ପ୍ରଭାବ, ଜୁମ୍ ଆନିମେସନ୍ ସବୁଆଡେ | ପ୍ରତ୍ୟେକ ସ୍କେଲ ମୂଲ୍ୟ ପାଇଁ ପୃଥକ କିଫ୍ରେମ ସୃଷ୍ଟି କରିବା ପରିବର୍ତ୍ତେ, ଆସନ୍ତୁ kf-zoom କିଫ୍ରେମର ଏକ ନମନୀୟ ସେଟ୍ ନିର୍ମାଣ କରିବା:
/ * * ଜୁମ୍ - ସ୍କେଲ୍ ଆନିମେସନ୍ | * ସ୍କେଲ ମୂଲ୍ୟଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-zoom-from ଏବଂ --kf-zoom-to ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: 80% ରୁ 100% (0.8 ରୁ 1) ଜୁମ୍ କରନ୍ତୁ | * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf-zoom 0.2s ସହଜ-ଆଉଟ୍; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // 50% ରୁ 100% ଜୁମ୍ କରନ୍ତୁ | * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% ରୁ 0% ଜୁମ୍ କରନ୍ତୁ | * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100% ରୁ 110% ଜୁମ୍ କରନ୍ତୁ | * /
@keyframes kf-zoom { ରୁ { ସ୍କେଲ: var (- kf-zoom-from, 0.8); } to { ସ୍କେଲ: var (- kf-zoom-to, 1); } }
ଗୋଟିଏ ପରିଭାଷା ସହିତ, ଆମେ ଆବଶ୍ୟକ କରୁଥିବା ଯେକ any ଣସି ଜୁମ୍ ଭେରିଏସନ ହାସଲ କରିପାରିବା: .toast { ଆନିମେସନ୍: kf- ସ୍ଲାଇଡ୍-ଇନ୍ 0.2s, kf-zoom 0.4s ସହଜ-ଆଉଟ୍; --kf- ସ୍ଲାଇଡ୍-ରୁ: 0 100%; / * ଉପରୁ ସ୍ଲାଇଡ୍ * / / * ଡିଫଲ୍ଟ ଜୁମ୍ ବ୍ୟବହାର କରେ: ମାପ 80% ରୁ 100% * / }
.modal { ଆନିମେସନ୍: kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; / * ନାଟକୀୟ ଜୁମ୍ 0% ରୁ 100% * / }
.heading { ଆନିମେସନ୍: kf-fade-in 2s, kf-zoom 2s ସହଜ-ଇନ୍; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; / * କୋମଳ ସ୍କେଲ୍ ତଳକୁ * / }
0.8 (80%) ଡିଫଲ୍ଟ ଅଧିକାଂଶ UI ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ କାମ କରେ, ଯେପରି ଟୋଷ୍ଟ ବାର୍ତ୍ତା ଏବଂ କାର୍ଡ, ଯେତେବେଳେ କି ସ୍ୱତନ୍ତ୍ର ମାମଲା ପାଇଁ କଷ୍ଟମାଇଜ୍ କରିବା ସହଜ ଅଟେ | ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 4 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ସାମ୍ପ୍ରତିକ ଉଦାହରଣଗୁଡିକରେ ଆପଣ ହୁଏତ କିଛି କ interesting ତୁହଳପ୍ରଦ ଧ୍ୟାନ ଦେଇଥିବେ: ଆମେ ଆନିମେସନ୍ ମିଶ୍ରଣ କରୁଛୁ | @ କିଫ୍ରାମ୍ ଟୋକେନ୍ ସହିତ କାମ କରିବାର ଏକ ପ୍ରମୁଖ ସୁବିଧା ହେଉଛି ଯେ ସେମାନେ ପରସ୍ପର ସହିତ ନିରବଚ୍ଛିନ୍ନ ଭାବରେ ଏକୀଭୂତ ହେବା ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛନ୍ତି | ଏହି ସୁଗମ ରଚନା ଉଦ୍ଦେଶ୍ୟମୂଳକ, ଦୁର୍ଘଟଣାଜନକ ନୁହେଁ | ଆମେ ପରେ ଆନିମେସନ୍ ରଚନା ବିଷୟରେ ଅଧିକ ବିସ୍ତୃତ ଭାବରେ ଆଲୋଚନା କରିବୁ, ଯେଉଁଠାରେ ସେମାନେ ସମସ୍ୟାଗ୍ରସ୍ତ ହୋଇପାରନ୍ତି, କିନ୍ତୁ ଅଧିକାଂଶ ମିଶ୍ରଣ ସରଳ ଏବଂ କାର୍ଯ୍ୟକାରୀ କରିବା ସହଜ | ଟିପନ୍ତୁ: ଏହି ଆର୍ଟିକିଲ୍ ଲେଖିବାବେଳେ, ଏବଂ ବୋଧହୁଏ ଏହାକୁ ଲେଖିବା ହେତୁ, ମୁଁ ପ୍ରବେଶ ଆନିମେସନ୍ ର ସମ୍ପୂର୍ଣ୍ଣ ଧାରଣା ବିଷୟରେ ପୁନର୍ବିଚାର କରିବାକୁ ପାଇଲି | CSS ର ସାମ୍ପ୍ରତିକ ଅଗ୍ରଗତି ସହିତ, ଆମେ ଏପର୍ଯ୍ୟନ୍ତ ସେମାନଙ୍କୁ ଆଦ need ଆବଶ୍ୟକ କରୁ କି? ସ uck ଭାଗ୍ୟବଶତ Adam, ଆଦାମ ଆର୍ଗିଲ୍ ସମାନ ପ୍ରଶ୍ନର ଅନୁସନ୍ଧାନ କରିଥିଲେ ଏବଂ ସେଗୁଡିକୁ ନିଜ ବ୍ଲଗରେ ଚମତ୍କାର ଭାବରେ ପ୍ରକାଶ କରିଥିଲେ | ଏଠାରେ ଯାହା ଲେଖା ହୋଇଛି ତାହା ଏହାର ବିରୋଧ କରେ ନାହିଁ, କିନ୍ତୁ ଏହା ବିଚାର କରିବାକୁ ଏକ ଆଭିମୁଖ୍ୟ ଉପସ୍ଥାପନ କରେ, ବିଶେଷତ if ଯଦି ଆପଣଙ୍କର ପ୍ରୋଜେକ୍ଟଗୁଡ଼ିକ ପ୍ରବେଶ ଆନିମେସନ୍ ଉପରେ ଅଧିକ ନିର୍ଭର କରେ | ନିରନ୍ତର ଆନିମେସନ୍ | ଯେତେବେଳେ ପ୍ରବେଶ ଆନିମେସନ୍, ଯେପରି “ଫେଡ୍”, “ସ୍ଲାଇଡ୍”, ଏବଂ “ଜୁମ୍” ଥରେ ଘଟେ ଏବଂ ତା’ପରେ ବନ୍ଦ ହୁଏ, କ୍ରମାଗତ ଆନିମେସନ୍ ଧ୍ୟାନ ଆକର୍ଷଣ କରିବା କିମ୍ବା ଚାଲୁଥିବା କାର୍ଯ୍ୟକଳାପକୁ ସୂଚାଇବା ପାଇଁ ଅନିର୍ଦ୍ଦିଷ୍ଟ କାଳ ପର୍ଯ୍ୟନ୍ତ ଲୁପ୍ ହୁଏ | ମୁଁ ସାମ୍ନା କରୁଥିବା ଦୁଇଟି ସାଧାରଣ କ୍ରମାଗତ ଆନିମେସନ୍ ହେଉଛି “ସ୍ପିନ୍” (ସୂଚକ ଲୋଡିଂ ପାଇଁ) ଏବଂ “ନାଡ” (ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଉପାଦାନଗୁଡ଼ିକୁ ହାଇଲାଇଟ୍ କରିବା ପାଇଁ) | କି-ଫ୍ରେମ୍ ଟୋକେନ୍ ସୃଷ୍ଟି କରିବାକୁ ଆସିବାବେଳେ ଏହି ଆନିମେସନ୍ଗୁଡ଼ିକ ଅନନ୍ୟ ଚ୍ୟାଲେଞ୍ଜ ଉପସ୍ଥାପନ କରେ | ପ୍ରବେଶ ଆନିମେସନ୍ ପରି, ଯାହା ସାଧାରଣତ one ଗୋଟିଏ ରାଜ୍ୟରୁ ଅନ୍ୟ ରାଜ୍ୟକୁ ଯାଏ, କ୍ରମାଗତ ଆନିମେସନ୍ ସେମାନଙ୍କ ଆଚରଣ s ାଞ୍ଚାରେ ଅତ୍ୟଧିକ କଷ୍ଟମାଇଜ୍ ହେବା ଆବଶ୍ୟକ | ସ୍ପିନ୍ ଡାକ୍ତର ପ୍ରତ୍ୟେକ ପ୍ରୋଜେକ୍ଟ ଏକାଧିକ ସ୍ପିନ୍ ଆନିମେସନ୍ ବ୍ୟବହାର କରୁଥିବା ପରି ମନେହୁଏ | କେତେକ ଘଣ୍ଟା ବୁଲାଇ ବୁଲନ୍ତି, ଅନ୍ୟମାନେ ଘଣ୍ଟା ବୁଲାଇ ବୁଲନ୍ତି | କେତେକ 360-ଡ଼ିଗ୍ରୀ ଘୂର୍ଣ୍ଣନ କରନ୍ତି, ଅନ୍ୟମାନେ ଦ୍ରୁତ ପ୍ରଭାବ ପାଇଁ ଏକାଧିକ ଟର୍ନ୍ କରନ୍ତି | ପ୍ରତ୍ୟେକ ପରିବର୍ତ୍ତନ ପାଇଁ ପୃଥକ କିଫ୍ରେମ୍ ସୃଷ୍ଟି କରିବା ପରିବର୍ତ୍ତେ, ଆସନ୍ତୁ ଗୋଟିଏ ନମନୀୟ ସ୍ପିନ୍ ନିର୍ମାଣ କରିବା ଯାହା ସମସ୍ତ ପରିସ୍ଥିତିକୁ ନିୟନ୍ତ୍ରଣ କରେ:
/ * * ସ୍ପିନ୍ - ଘୂର୍ଣ୍ଣନ ଆନିମେସନ୍ | * ଘୂର୍ଣ୍ଣନ ପରିସରକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-spin-from ଏବଂ --kf-spin-to ବ୍ୟବହାର କରନ୍ତୁ | * ଘୂର୍ଣ୍ଣନ ପରିମାଣକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-spin-turn ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: 0deg ରୁ 360deg (1 ପୂର୍ଣ୍ଣ ଘୂର୍ଣ୍ଣନ) କୁ ଘୂର୍ଣ୍ଣନ କରେ | * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf-spin 1s ର line ଖ୍ୟ ଅସୀମ; * --kf-spin-turn: 2; // 2 ପୂର୍ଣ୍ଣ ଘୂର୍ଣ୍ଣନ | * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // ଅଧା ଘୂର୍ଣ୍ଣନ | * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // ଓଲଟା ଘଣ୍ଟା | * /
@keyframes kf-spin { ରୁ { ଘୂର୍ଣ୍ଣନ: var (- kf-spin-from, 0deg); } to { ଘୂର୍ଣ୍ଣନ: କାଲ୍କ (var (- kf-spin-from, 0deg) + var (- kf-spin-to, 360deg) * var (- kf-spin-turn, 1)); } }
ବର୍ତ୍ତମାନ ଆମେ ପସନ୍ଦ କରୁଥିବା ଯେକ any ଣସି ସ୍ପିନ୍ ଭେରିଏସନ ସୃଷ୍ଟି କରିପାରିବା:
.loading-spinner { ଆନିମେସନ୍: kf-spin 1s ର line ଖ୍ୟ ଅସୀମ; / * ଡିଫଲ୍ଟ ବ୍ୟବହାର କରେ: 0deg ରୁ 360deg * / }
.fast-loader { ଆନିମେସନ୍: kf-spin 1.2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; --kf-spin-turn: 3; / * ଚକ୍ର ପ୍ରତି ପ୍ରତ୍ୟେକ ଦିଗ ପାଇଁ 3 ପୂର୍ଣ୍ଣ ଘୂର୍ଣ୍ଣନ |* / }
.steped-reverse { ଆନିମେସନ୍: kf-spin 1.5s ପଦାଙ୍କ (8) ଅସୀମ; --kf-spin-to: -360deg; / * ଘଣ୍ଟା ବୁଲାଇ * / }
.subtle-wiggle { ଆନିମେସନ୍: kf-spin 2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; --kf-spin-from: -16deg; --kf-spin-to: 32deg; / * ୱିଗଲ୍ 36 ଡିଗ୍ରୀ: -18deg ରୁ + 18deg * / }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 5 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏହି ପଦ୍ଧତିର ସ beauty ନ୍ଦର୍ଯ୍ୟ ହେଉଛି ସ୍ପିନର ଲୋଡିଂ, ଘୂର୍ଣ୍ଣନ ଆଇକନ୍, ୱିଗଲ୍ ଇଫେକ୍ଟ ଏବଂ ଏପରିକି ଜଟିଳ ମଲ୍ଟି ଟର୍ନ ଆନିମେସନ୍ ପାଇଁ ସମାନ କିଫ୍ରାମ୍ କାମ କରେ | ପଲ୍ସ ପାରାଡୋକ୍ସ | ପଲ୍ସ ଆନିମେସନ୍ କ ic ଶଳପୂର୍ଣ୍ଣ କାରଣ ସେମାନେ ବିଭିନ୍ନ ଗୁଣକୁ “ନାଡ” କରିପାରିବେ | କେତେକ ସ୍କେଲ୍କୁ ନାଡ କରନ୍ତି, ଆଉ କେତେକ ସ୍ୱଚ୍ଛତାକୁ ନାଡ କରନ୍ତି, ଏବଂ କିଛି ନାଡିର ରଙ୍ଗ ଗୁଣ ଉଜ୍ଜ୍ୱଳତା କିମ୍ବା ପରିପୃଷ୍ଠତା | ପ୍ରତ୍ୟେକ ସମ୍ପତ୍ତି ପାଇଁ ପୃଥକ କିଫ୍ରେମ୍ ସୃଷ୍ଟି କରିବା ପରିବର୍ତ୍ତେ, ଆମେ କିଫ୍ରେମ୍ ସୃଷ୍ଟି କରିପାରିବା ଯାହା ଯେକ any ଣସି CSS ସମ୍ପତ୍ତି ସହିତ କାମ କରେ | ସ୍କେଲ ଏବଂ ସ୍ୱଚ୍ଛତା ବିକଳ୍ପ ସହିତ ଏକ ପଲ୍ସ କିଫ୍ରେମର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି:
/ * * ପଲ୍ସ - ପଲସିଂ ଆନିମେସନ୍ | * ସ୍କେଲ ପରିସରକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-pulse-scale-from ଏବଂ --kf-pulse-scale-to ବ୍ୟବହାର କରନ୍ତୁ | * ସ୍ୱଚ୍ଛତା ସୀମାକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-pulse-opacity-from ଏବଂ --kf-pulse-opacity-କୁ ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: ନାଡ ନାହିଁ (ସମସ୍ତ ମୂଲ୍ୟ 1) * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf-pulse 2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // ସ୍କେଲ ପଲ୍ସ | * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // ସ୍ୱଚ୍ଛତା ନାଡ | * /
@keyframes kf-pulse { ରୁ { ସ୍କେଲ: var (- kf-pulse-scale-from, 1); ସ୍ୱଚ୍ଛତା: var (- kf-pulse-opacity-from, 1); } to { ସ୍କେଲ: var (- kf-pulse-scale-to, 1); ସ୍ୱଚ୍ଛତା: var (- kf-pulse-opacity-to, 1); } }
ଏହା ଏକ ନମନୀୟ ନାଡ ସୃଷ୍ଟି କରେ ଯାହା ଏକାଧିକ ଗୁଣକୁ ଜୀବନ୍ତ କରିପାରିବ: କଲ୍-ଟୁ-ଆକ୍ସନ୍ { ଆନିମେସନ୍: kf-pulse 0.6s ଅସୀମ ବିକଳ୍ପ; --kf-pulse-opacity-from: 0.5; / * ସ୍ୱଚ୍ଛତା ନାଡ * / }
.notification-dot { ଆନିମେସନ୍: kf-pulse 0.6s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; / * ସ୍କେଲ ପଲ୍ସ * / }
.text-highlight { ଆନିମେସନ୍: kf-pulse 1.5s ସହଜ-ଅସୀମ; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; / * ସ୍କେଲ୍ ଏବଂ ସ୍ୱଚ୍ଛତା ନାଡ * / }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 6 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏହି ଏକକ କେଏଫ୍-ପଲ୍ସ କୀଫ୍ରେମ୍ ସୂକ୍ଷ୍ମ ଧ୍ୟାନ ଠାରୁ ଆରମ୍ଭ କରି ନାଟକୀୟ ହାଇଲାଇଟ୍ ପର୍ଯ୍ୟନ୍ତ ସବୁକିଛି ପରିଚାଳନା କରିପାରିବ, କଷ୍ଟମାଇଜ୍ କରିବା ସହଜ | ଉନ୍ନତ ସହଜତା | କିଫ୍ରାମ୍ ଟୋକେନ୍ ବ୍ୟବହାର କରିବା ବିଷୟରେ ଏକ ମହତ୍ ଜିନିଷ ହେଉଛି ଆମର ଆନିମେସନ୍ ଲାଇବ୍ରେରୀକୁ ବିସ୍ତାର କରିବା ଏବଂ ପ୍ରଭାବ ପ୍ରଦାନ କରିବା କେତେ ସହଜ, ଯାହା ଅଧିକାଂଶ ଡେଭଲପର୍ମାନେ ଇଲାଷ୍ଟିକ୍ କିମ୍ବା ବାଉନ୍ସ ପରି ଆରମ୍ଭରୁ ଲେଖିବାକୁ ବ୍ୟଗ୍ର ହେବେ ନାହିଁ | ଏଠାରେ ଏକ ସରଳ “ବାଉନ୍ସ” କିଫ୍ରାମ୍ ଟୋକେନ୍ ର ଏକ ଉଦାହରଣ ଅଛି ଯାହା ଜମ୍ପ ଉଚ୍ଚତାକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ କଷ୍ଟମ୍ ପ୍ରପର୍ଟିରୁ --kf-bounce-uses ବ୍ୟବହାର କରେ | / * * ବାଉନ୍ସ - ବାଉନ୍ସ ପ୍ରବେଶ ପ୍ରବେଶ ଆନିମେସନ୍ | * ଜମ୍ପ ଉଚ୍ଚତାକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-bounce-from ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: 100vh ରୁ ଡେଇଁପଡେ (ଅଫ୍ ସ୍କ୍ରିନ୍) * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf-bounce 3s ସହଜ-ଇନ୍; * --kf-bounce-from: 200px; // 200px ଉଚ୍ଚତାରୁ ଡେଇଁବା | * /
@keyframes kf-bounce { 0% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -1); }
34% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.4); }
55% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.2); }
72% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.1); }
85% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.05); }
94% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.025); }
99% { ଅନୁବାଦ: 0 କାଲ୍କ (var (- kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ଅନୁବାଦ: 0 0; ଆନିମେସନ୍-ଟାଇମିଂ-ଫଙ୍କସନ୍: ସହଜ-ଆଉଟ୍; } }
କିଫ୍ରାମ୍ ଭିତରେ ଥିବା ଗଣନା ହେତୁ “ଇଲେଷ୍ଟିକ୍” ପରି ଆନିମେସନ୍ ଟିକେ କ ic ଶଳପୂର୍ଣ୍ଣ | ଆମକୁ --kf-elastic-from-X ଏବଂ --kf-elastic-from-Y କୁ ପୃଥକ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିବାକୁ ପଡିବ (ଉଭୟ ଇଚ୍ଛାଧୀନ), ଏବଂ ଏକତ୍ର ସେମାନେ ପରଦାର ଯେକ point ଣସି ବିନ୍ଦୁରୁ ଏକ ଇଲେଷ୍ଟିକ୍ ପ୍ରବେଶ ଦ୍ୱାର ସୃଷ୍ଟି କରିବାକୁ ଦିଅନ୍ତି |
/ * * ଇଲେଷ୍ଟିକ୍ ଇନ୍ - ଇଲଷ୍ଟିକ୍ ପ୍ରବେଶ ପ୍ରବେଶ ଆନିମେସନ୍ | * ଆରମ୍ଭ ସ୍ଥିତିକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ --kf-elastic-from-X ଏବଂ --kf-elastic-from-Y କୁ ବ୍ୟବହାର କରନ୍ତୁ | * ଡିଫଲ୍ଟ: ଶୀର୍ଷ କେନ୍ଦ୍ରରୁ ପ୍ରବେଶ କରେ (0, -100vh) * ବ୍ୟବହାର: * ଆନିମେସନ୍: kf-elastic-in 2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଉଭୟ; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px) ରୁ ପ୍ରବେଶ କରନ୍ତୁ | * /
@keyframes kf-elastic-in { 0% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * 1) calc (var (- kf-elastic-from-Y, 0px) * 1); }
16% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * -0.3227) calc (var (- kf-elastic-from-Y, 0px) * -0.3227); }
28% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * 0.1312)calc (var (- kf-elastic-from-Y, 0px) * 0.1312); }
44% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * -0.0463) calc (var (- kf-elastic-from-Y, 0px) * -0.0463); }
59% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * 0.0164) calc (var (- kf-elastic-from-Y, 0px) * 0.0164); }
73% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * -0.0058) calc (var (- kf-elastic-from-Y, 0px) * -0.0058); }
88% { ଅନୁବାଦ: କାଲ୍କ (var (- kf-elastic-from-X, -50vw) * 0.0020) calc (var (- kf-elastic-from-Y, 0px) * 0.0020); }
100% { ଅନୁବାଦ: 0 0; } }
ଏହି ପଦ୍ଧତି ଆମ ପ୍ରୋଜେକ୍ଟରେ ଉନ୍ନତ କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ପୁନ use ବ୍ୟବହାର ଏବଂ କଷ୍ଟମାଇଜ୍ କରିବା ସହଜ କରିଥାଏ, କେବଳ ଗୋଟିଏ କଷ୍ଟମ୍ ପ୍ରପର୍ଟି ପରିବର୍ତ୍ତନ କରି |
.bounce-and-zoom { ଆନିମେସନ୍: kf-bounce 3s ସହଜ, kf-zoom 3s ର line ଖ୍ୟ; --kf-zoom-from: 0; }
.bounce-and-slide { ଆନିମେସନ୍-ରଚନା: ଯୋଗ; / * ଉଭୟ ଆନିମେସନ୍ ଅନୁବାଦ ବ୍ୟବହାର କରନ୍ତି * / ଆନିମେସନ୍: kf-bounce 3s ସହଜ, kf- ସ୍ଲାଇଡ୍-ଇନ୍ 3s ସହଜ-ଆଉଟ୍; --kf- ସ୍ଲାଇଡ୍-ରୁ: -200px; }
.elastic-in { ଆନିମେସନ୍: kf-elastic-in 2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଉଭୟ; }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 7 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏହି ପର୍ଯ୍ୟନ୍ତ, ଆମେ ଦେଖିଲୁ କି ଆମେ କିପରି ସ୍ମାର୍ଟ ଏବଂ ଦକ୍ଷ ଉପାୟରେ କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ଏକତ୍ର କରିପାରିବା | ଅବଶ୍ୟ, ତୁମର ପ୍ରୋଜେକ୍ଟର ଆବଶ୍ୟକତାକୁ ଭଲ ଭାବରେ ଫିଟ୍ କରିବା ପାଇଁ ତୁମେ ଜିନିଷଗୁଡିକୁ ଟୁଇକ୍ କରିବାକୁ ଚାହିଁବ, କିନ୍ତୁ ଆମେ ଅନେକ ସାଧାରଣ ଆନିମେସନ୍ ଏବଂ ଦ day ନନ୍ଦିନ ବ୍ୟବହାର ମାମଲାଗୁଡ଼ିକର ଉଦାହରଣଗୁଡିକୁ ଆବୃତ କରିଛୁ | ଏବଂ ଏହି କିଫ୍ରାମ୍ ଟୋକେନ୍ଗୁଡ଼ିକ ସହିତ, ବର୍ତ୍ତମାନ ସମଗ୍ର ପ୍ରୋଜେକ୍ଟରେ ସ୍ଥିର, ରକ୍ଷଣାବେକ୍ଷଣ ଆନିମେସନ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଆମର ଶକ୍ତିଶାଳୀ ବିଲ୍ଡିଂ ବ୍ଲକ୍ ଅଛି | ଆଉ ନକଲ କିଫ୍ରାମ୍ ନାହିଁ, ଆଉ ବିଶ୍ୱସ୍ତରୀୟ ପରିସର ବିବାଦ ନାହିଁ | ଆମର ସମସ୍ତ ଆନିମେସନ୍ ଆବଶ୍ୟକତାକୁ ପରିଚାଳନା କରିବା ପାଇଁ କେବଳ ଏକ ପରିଷ୍କାର, ସୁବିଧାଜନକ ଉପାୟ | କିନ୍ତୁ ପ୍ରକୃତ ପ୍ରଶ୍ନ ହେଉଛି: ଆମେ କିପରି ଏହି ବିଲ୍ଡିଂ ବ୍ଲକଗୁଡ଼ିକୁ ଏକତ୍ର ରଚନା କରିବା? ଏହାକୁ ଏକାଠି ରଖିବା | ଆମେ ଦେଖିଲୁ ଯେ ମ basic ଳିକ କିଫ୍ରାମ୍ ଟୋକେନ୍ଗୁଡ଼ିକୁ ମିଶ୍ରଣ କରିବା ସରଳ ଅଟେ | ଆମକୁ ବିଶେଷ କିଛି ଦରକାର ନାହିଁ କିନ୍ତୁ ପ୍ରଥମ ଆନିମେସନ୍ ବ୍ୟାଖ୍ୟା କରିବା, ଦ୍ୱିତୀୟଟି ବ୍ୟାଖ୍ୟା କରିବା, ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଭେରିଏବଲ୍ ସେଟ୍ କରିବା, ଏବଂ ତାହା ହେଉଛି | / * ସ୍ଲାଇଡ୍ ରେ * / .toast { ଆନିମେସନ୍: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf- ସ୍ଲାଇଡ୍-ରୁ: 0 40px; }
/ * ଜୁମ୍ ଇନ୍ + ଫ୍ୟାଡ୍ ଇନ୍ * / .modal { ଆନିମେସନ୍: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/ * ପଲ୍ସରେ ସ୍ଲାଇଡ୍ * / .notification { ଆନିମେସନ୍: kf- ସ୍ଲାଇଡ୍-ଇନ୍ 0.5s, kf-pulse 1.2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; --kf- ସ୍ଲାଇଡ୍-ରୁ: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
ଏହି ମିଶ୍ରଣଗୁଡିକ ସୁନ୍ଦର ଭାବରେ କାମ କରେ କାରଣ ପ୍ରତ୍ୟେକ ଆନିମେସନ୍ ଏକ ଭିନ୍ନ ସମ୍ପତ୍ତିକୁ ଟାର୍ଗେଟ୍ କରେ: ସ୍ୱଚ୍ଛତା, ରୂପାନ୍ତର (ଅନୁବାଦ / ସ୍କେଲ୍) ଇତ୍ୟାଦି | କିନ୍ତୁ ବେଳେବେଳେ ଦ୍ୱନ୍ଦ୍ୱ ଦେଖାଦେଇଥାଏ, ଏବଂ ସେମାନଙ୍କୁ କାହିଁକି ଏବଂ କିପରି ମୁକାବିଲା କରାଯିବ ତାହା ଆମକୁ ଜାଣିବା ଆବଶ୍ୟକ | ଯେତେବେଳେ ଦୁଇଟି ଆନିମେସନ୍ ସମାନ ପ୍ରପର୍ଟି ଆନିମେସନ୍ କରିବାକୁ ଚେଷ୍ଟା କରେ - ଉଦାହରଣ ସ୍ୱରୂପ, ଉଭୟ ଆନିମେସନ୍ ସ୍କେଲ୍ କିମ୍ବା ଉଭୟ ଆନିମେସନ୍ ସ୍ୱଚ୍ଛତା - ଫଳାଫଳ ଆପଣ ଯାହା ଆଶା କରନ୍ତି ତାହା ହେବ ନାହିଁ | ଡିଫଲ୍ଟ ଭାବରେ, କେବଳ ଗୋଟିଏ ଆନିମେସନ୍ ସେହି ସମ୍ପତ୍ତିରେ ପ୍ରୟୋଗ ହୁଏ, ଯାହା ଆନିମେସନ୍ ତାଲିକାର ଶେଷ ଅଟେ | ସମାନ ସମ୍ପତ୍ତିରେ CSS କିପରି ଏକାଧିକ ଆନିମେସନ୍ ନିୟନ୍ତ୍ରଣ କରେ ଏହାର ଏକ ସୀମା | ଉଦାହରଣ ସ୍ୱରୂପ, ଏହା ଉଦ୍ଦିଷ୍ଟ ଭାବରେ କାମ କରିବ ନାହିଁ କାରଣ କେବଳ kf-pulse ଆନିମେସନ୍ ପ୍ରୟୋଗ ହେବ | .bad-combo { ଆନିମେସନ୍: kf-zoom 0.5s ଅଗ୍ରଗାମୀ, kf-pulse 1.2s ଅସୀମ ବିକଳ୍ପ; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
ଆନିମେସନ୍ ଆଡିଶନ୍ | ଏକାଧିକ ଆନିମେସନ୍ ପରିଚାଳନା କରିବାର ସରଳ ଏବଂ ପ୍ରତ୍ୟକ୍ଷ ଉପାୟ ଯାହା ସମାନ ସମ୍ପତ୍ତି ଉପରେ ପ୍ରଭାବ ପକାଇଥାଏ, ଆନିମେସନ୍-ରଚନା ପ୍ରପର୍ଟି ବ୍ୟବହାର କରିବା | ଉପରୋକ୍ତ ଶେଷ ଉଦାହରଣରେ, kf-pulse ଆନିମେସନ୍ kf-zoom ଆନିମେସନ୍ ବଦଳାଇଥାଏ, ତେଣୁ ଆମେ ପ୍ରାରମ୍ଭିକ ଜୁମ୍ ଦେଖିବା ନାହିଁ ଏବଂ ଆଶା କରାଯାଉଥିବା ସ୍କେଲ୍ 1.2 କୁ ପାଇବୁ ନାହିଁ | ଯୋଡିବାକୁ ଆନିମେସନ୍-ରଚନା ସେଟ୍ କରି, ଆମେ ଉଭୟ ଆନିମେସନ୍ ମିଶ୍ରଣ କରିବାକୁ ବ୍ରାଉଜରକୁ କହିଥାଉ | ଏହା ଆମକୁ ଚାହୁଁଥିବା ଫଳାଫଳ ଦେଇଥାଏ | .component-two { ଆନିମେସନ୍-ରଚନା: ଯୋଗ; }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 8 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏହି ପଦ୍ଧତି ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ ଭଲ କାମ କରେ ଯେଉଁଠାରେ ଆମେ ସମାନ ସମ୍ପତ୍ତି ଉପରେ ପ୍ରଭାବକୁ ଏକତ୍ର କରିବାକୁ ଚାହୁଁ | ଯେତେବେଳେ ଆମେ ଷ୍ଟାଟିକ୍ ପ୍ରପର୍ଟି ଭାଲ୍ୟୁ ସହିତ ଆନିମେସନ୍ ମିଶ୍ରଣ କରିବା ଆବଶ୍ୟକ କରନ୍ତି ଏହା ମଧ୍ୟ ଉପଯୋଗୀ | ଉଦାହରଣ ସ୍ .ରୁପ, ଯଦି ଆମର ଏକ ଉପାଦାନ ଅଛି, ଯାହା ଆମେ ଚାହୁଁଥିବା ସ୍ଥାନକୁ ସ୍ଥିର କରିବା ପାଇଁ ଅନୁବାଦ ପ୍ରପର୍ଟି ବ୍ୟବହାର କରେ, ଏବଂ ତା’ପରେ ଆମେ ଏହାକୁ kf- ସ୍ଲାଇଡ୍-ଇନ୍ କିଫ୍ରାମ୍ ସହିତ ଆନିମେସନ୍ କରିବାକୁ ଚାହୁଁ, ଆନିମେସନ୍-ରଚନା ବିନା ଏକ ଖରାପ ଦୃଶ୍ୟମାନ ଜମ୍ପ ପାଇଥାଉ | ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 9 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଯୋଡିବାକୁ ଆନିମେସନ୍-ରଚନା ସେଟ୍ ସହିତ, ଆନିମେସନ୍ ବିଦ୍ୟମାନ ସହିତ ସୁରୁଖୁରୁରେ ମିଶ୍ରିତ |ରୂପାନ୍ତର କରନ୍ତୁ, ତେଣୁ ଉପାଦାନଟି ସ୍ଥାନରେ ରହିଥାଏ ଏବଂ ଆଶା କରାଯାଉଥିବା ପରି ଆନିମେସନ୍ କରେ | ଆନିମେସନ୍ ଷ୍ଟାଗର୍ | ଏକାଧିକ ଆନିମେସନ୍ ପରିଚାଳନା କରିବାର ଅନ୍ୟ ଏକ ଉପାୟ ହେଉଛି ସେମାନଙ୍କୁ “ଷ୍ଟଗ୍” କରିବା - ଅର୍ଥାତ୍ ପ୍ରଥମଟି ଶେଷ ହେବା ପରେ ଦ୍ୱିତୀୟ ଆନିମେସନ୍ ଟିକିଏ ଆରମ୍ଭ କରିବା | ଏହା ଏକ ସମାଧାନ ନୁହେଁ ଯାହା ପ୍ରତ୍ୟେକ କ୍ଷେତ୍ରରେ କାମ କରେ, କିନ୍ତୁ ଯେତେବେଳେ ଆମର ଏକ ପ୍ରବେଶ ଆନିମେସନ୍ ଥାଏ, ସେତେବେଳେ କ୍ରମାଗତ ଆନିମେସନ୍ ପରେ ଏହା ଉପଯୋଗୀ | / * ଅପସିସିଟି ପଲ୍ସରେ * .notification { ଆନିମେସନ୍: kf-fade-in 2s ସହଜ-ଆଉଟ୍, kf-pulse 0.5s 2s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ ବିକଳ୍ପ; --kf-pulse-opacity-to: 0.5; }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 10 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଅର୍ଡର ବିଷୟଗୁଡିକ | ଆନିମେସନ୍ଗୁଡ଼ିକର ଏକ ବଡ଼ ଅଂଶ ଆମେ ଟ୍ରାନ୍ସଫର୍ମ ପ୍ରପର୍ଟି ବ୍ୟବହାର କରି କାମ କରୁ | ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ, ଏହା କେବଳ ଅଧିକ ସୁବିଧାଜନକ ଅଟେ | ଏହାର ଏକ କାର୍ଯ୍ୟଦକ୍ଷତା ସୁବିଧା ମଧ୍ୟ ଅଛି କାରଣ ଟ୍ରାନ୍ସଫର୍ମ ଆନିମେସନ୍ GPU- ତ୍ୱରାନ୍ୱିତ ହୋଇପାରେ | କିନ୍ତୁ ଯଦି ଆମେ ଟ୍ରାନ୍ସଫର୍ମ ବ୍ୟବହାର କରୁ, ତେବେ ଆମକୁ ଗ୍ରହଣ କରିବାକୁ ପଡିବ ଯେ ଯେଉଁ କ୍ରମରେ ଆମେ ଆମର ପରିବର୍ତ୍ତନ କାର୍ଯ୍ୟ କରୁ | ବହୁତ ଆମର କିଫ୍ରାମ୍ ଗୁଡିକରେ ଏପର୍ଯ୍ୟନ୍ତ, ଆମେ ବ୍ୟକ୍ତିଗତ ରୂପାନ୍ତର ବ୍ୟବହାର କରିଛୁ | ସ୍ପେକ୍ସ ଅନୁଯାୟୀ, ଏଗୁଡ଼ିକ ସର୍ବଦା ଏକ ସ୍ଥିର କ୍ରମରେ ପ୍ରୟୋଗ କରାଯାଏ: ପ୍ରଥମେ, ଉପାଦାନ ଅନୁବାଦ ହୁଏ, ତାପରେ ଘୂର୍ଣ୍ଣନ କରେ, ତାପରେ ସ୍କେଲ୍ ହୁଏ | ଏହାର ଅର୍ଥ ହେଉଛି ଏବଂ ଆମମାନଙ୍କ ମଧ୍ୟରୁ ଅଧିକାଂଶ ଯାହା ଆଶା କରନ୍ତି | ଯଦିଓ, ଯଦି ଆମେ ଟ୍ରାନ୍ସଫର୍ମ ପ୍ରପର୍ଟି ବ୍ୟବହାର କରୁ, ଫଙ୍କସନ୍ ଗୁଡିକ ଲେଖାଯାଇଥିବା କ୍ରମ ହେଉଛି ସେଗୁଡିକ ପ୍ରୟୋଗ | ଏହି ପରିପ୍ରେକ୍ଷୀରେ, ଯଦି ଆମେ X- ଅକ୍ଷରେ କିଛି 100 ପିକ୍ସେଲ ଘୁଞ୍ଚାଇ ତା’ପରେ 45 ଡିଗ୍ରୀ ଘୂର୍ଣ୍ଣନ କରିବା, ଏହା ପ୍ରଥମେ 45 ଡିଗ୍ରୀ ଘୂର୍ଣ୍ଣନ କରିବା ଏବଂ ତା’ପରେ 100 ପିକ୍ସେଲ ଘୁଞ୍ଚାଇବା ସହିତ ସମାନ ନୁହେଁ | / * ଗୋଲାପୀ ବର୍ଗ: ପ୍ରଥମେ ଅନୁବାଦ କର, ତାପରେ ଘୂର୍ଣ୍ଣନ କର * / .example-one { ରୂପାନ୍ତର: translateX (100px) ଘୂର୍ଣ୍ଣନ (45deg); }
/ * ସବୁଜ ବର୍ଗ: ପ୍ରଥମେ ଘୂର୍ଣ୍ଣନ କର, ତାପରେ ଅନୁବାଦ କର * / .example-two { ରୂପାନ୍ତର: ଘୂର୍ଣ୍ଣନ (45deg) translateX (100px); }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 11 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | କିନ୍ତୁ ଟ୍ରାନ୍ସଫର୍ମ କ୍ରମ ଅନୁଯାୟୀ, ସମସ୍ତ ବ୍ୟକ୍ତିଗତ ରୂପାନ୍ତର - କିଫ୍ରାମ୍ ଟୋକେନ୍ ପାଇଁ ଆମେ ବ୍ୟବହାର କରିଥିବା ସବୁକିଛି - ଟ୍ରାନ୍ସଫର୍ମ ଫଙ୍କସନ୍ ପୂର୍ବରୁ ଘଟିଥାଏ | ଏହାର ଅର୍ଥ ଆପଣ ଟ୍ରାନ୍ସଫର୍ମ ପ୍ରପର୍ଟିରେ ସେଟ୍ କରିଥିବା କିଛି ଆନିମେସନ୍ ପରେ ଘଟିବ | କିନ୍ତୁ ଯଦି ଆପଣ ସେଟ୍ କରନ୍ତି, ଉଦାହରଣ ସ୍ୱରୂପ, kf-spin କିଫ୍ରେମ୍ ସହିତ ଏକତ୍ର ଅନୁବାଦ କରନ୍ତୁ, ଆନିମେସନ୍ ପୂର୍ବରୁ ଅନୁବାଦ ଘଟିବ | ଦ୍ୱନ୍ଦ୍ୱ ଏପର୍ଯ୍ୟନ୍ତ ?! ଏହା ପରିସ୍ଥିତିକୁ ନେଇଥାଏ ଯେଉଁଠାରେ ଷ୍ଟାଟିକ୍ ମୂଲ୍ୟଗୁଡ଼ିକ ସମାନ ଆନିମେସନ୍ ପାଇଁ ଭିନ୍ନ ଫଳାଫଳ ସୃଷ୍ଟି କରିପାରନ୍ତି, ଯେପରି ନିମ୍ନ କ୍ଷେତ୍ରରେ:
/ * ଉଭୟ ସ୍ପିନରଙ୍କ ପାଇଁ ସାଧାରଣ ଆନିମେସନ୍ * / .spinner { ଆନିମେସନ୍: kf-spin 1s ର line ଖ୍ୟ ଅସୀମ; }
/ * ଗୋଲାପୀ ସ୍ପିନର୍: ଘୂର୍ଣ୍ଣନ ପୂର୍ବରୁ ଅନୁବାଦ କରନ୍ତୁ (ବ୍ୟକ୍ତିଗତ ରୂପାନ୍ତର) * / .spinner-pink { ଅନୁବାଦ: 100% 50%; }
/ * ସବୁଜ ସ୍ପିନର୍: ଘୂର୍ଣ୍ଣନ କର ତାପରେ ଅନୁବାଦ କର (ଫଙ୍କସନ୍ କ୍ରମ) * / .spinner-green { ରୂପାନ୍ତର: ଅନୁବାଦ (100%, 50%); }
ପେନ୍ କିଫ୍ରାମ୍ ଟୋକେନ୍ - ଅମିତ ଶିନଙ୍କ ଦ୍ୱାରା ଡେମୋ 12 [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଆପଣ ଦେଖିପାରିବେ ଯେ ପ୍ରଥମ ସ୍ପିନର୍ (ଗୋଲାପୀ) ଏକ ଅନୁବାଦ ପାଇଥାଏ ଯାହାକି kf-spin ର ଘୂର୍ଣ୍ଣନ ପୂର୍ବରୁ ଘଟେ, ତେଣୁ ଏହା ପ୍ରଥମେ ନିଜ ସ୍ଥାନକୁ ଚାଲିଯାଏ ଏବଂ ତା’ପରେ ସ୍ପିନ୍ ହୁଏ | ଦ୍ୱିତୀୟ ସ୍ପିନର (ସବୁଜ) ଏକ ଅନୁବାଦ () ଫଙ୍କସନ୍ ପାଇଥାଏ ଯାହା ବ୍ୟକ୍ତିଗତ ରୂପାନ୍ତର ପରେ ଘଟେ, ତେଣୁ ଉପାଦାନ ପ୍ରଥମେ ଘୂର୍ଣ୍ଣନ କରେ, ତା’ପରେ ଏହାର ସାମ୍ପ୍ରତିକ କୋଣ ସହିତ ଗତି କରେ, ଏବଂ ଆମେ ସେହି ବିସ୍ତୃତ କକ୍ଷପଥ ପ୍ରଭାବ ପାଇଥାଉ | ନା, ଏହା ଏକ ତ୍ରୁଟି ନୁହେଁ | CSS ବିଷୟରେ ଜାଣିବା ଆବଶ୍ୟକ ଏବଂ ଏକାଧିକ ଆନିମେସନ୍ କିମ୍ବା ଏକାଧିକ ଟ୍ରାନ୍ସଫର୍ମ ସହିତ କାମ କରିବାବେଳେ ଏହା ମନେ ରଖିବା ଆବଶ୍ୟକ | ଯଦି ଆବଶ୍ୟକ ହୁଏ, ଆପଣ kf-spin-alt କିଫ୍ରେମର ଏକ ଅତିରିକ୍ତ ସେଟ୍ ମଧ୍ୟ ସୃଷ୍ଟି କରିପାରିବେ ଯାହା ଘୂର୍ଣ୍ଣନ () ଫଙ୍କସନ୍ ବ୍ୟବହାର କରି ଉପାଦାନଗୁଡ଼ିକୁ ଘୂର୍ଣ୍ଣନ କରେ | ହ୍ରାସ ଗତି ଏବଂ ଯେତେବେଳେ ଆମେ ବିକଳ୍ପ କିଫ୍ରେମ୍ ବିଷୟରେ କହୁଛୁ, ଆମେ “ନୋ ଆନିମେସନ୍” ଅପ୍ସନ୍ କୁ ଅଣଦେଖା କରିପାରିବୁ ନାହିଁ | କିଫ୍ରାମ୍ ଟୋକେନ୍ ବ୍ୟବହାର କରିବାର ସବୁଠାରୁ ବଡ ସୁବିଧା ହେଉଛି ଆକ୍ସେସିବିଲିଟି ବ୍ରେକ୍ ହୋଇପାରିବ, ଏବଂ ଏହା କରିବା ପ୍ରକୃତରେ ସହଜ | ଆକ୍ସେସିବିଲିଟି ସହିତ ଆମର କିଫ୍ରାମ୍ ଡିଜାଇନ୍ କରି, ଆମେ ନିଶ୍ଚିତ କରିପାରିବା ଯେ ହ୍ରାସ ହୋଇଥିବା ଗତିକୁ ପସନ୍ଦ କରୁଥିବା ଉପଭୋକ୍ତାମାନେ ଅତିରିକ୍ତ କାର୍ଯ୍ୟ କିମ୍ବା କୋଡ୍ ନକଲ ବିନା ଏକ ସୁଗମ, କମ୍ ବିଭ୍ରାନ୍ତିକର ଅଭିଜ୍ଞତା ପାଇପାରିବେ | “ହ୍ରାସ ହୋଇଥିବା ଗତି” ର ପ୍ରକୃତ ଅର୍ଥ ଗୋଟିଏ ଆନିମେସନ୍ ରୁ ଅନ୍ୟ ଆନିମେସନ୍ ଏବଂ ପ୍ରୋଜେକ୍ଟରୁ ପ୍ରୋଜେକ୍ଟକୁ ଟିକିଏ ବଦଳିପାରେ, କିନ୍ତୁ ମନେରଖିବାକୁ ଏଠାରେ କିଛି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ବିଷୟ ଅଛି: କିଫ୍ରାମ୍ ମ୍ୟୁଟିଙ୍ଗ୍ | ଯେତେବେଳେ କିଛି ଆନିମେସନ୍ ନରମ କିମ୍ବା ମନ୍ଥର ହୋଇପାରେ, ଅନ୍ୟମାନେ ଅଛନ୍ତି ଯାହା ହ୍ରାସ ହୋଇଥିବା ଗତି ଅନୁରୋଧ ହେଲେ ସମ୍ପୂର୍ଣ୍ଣ ଅଦୃଶ୍ୟ ହେବା ଉଚିତ | ପଲ୍ସ ଆନିମେସନ୍ ଏକ ଭଲ ଉଦାହରଣ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଏହି ଆନିମେସନ୍ଗୁଡ଼ିକ ହ୍ରାସ ହୋଇଥିବା ମୋଡ୍ ମୋଡ୍ ରେ ଚାଲୁ ନାହିଁ, ଆମେ ସେଗୁଡିକୁ କେବଳ ଉପଯୁକ୍ତ ମିଡିଆ ଜିଜ୍ଞାସାରେ ଗୁଡ଼ାଇ ପାରିବା |
@ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { @keyfrmaes kf-pulse { ରୁ { ସ୍କେଲ: var (- kf-pulse-scale-from, 1); ସ୍ୱଚ୍ଛତା: var (- kf-pulse-opacity-from, 1); } to { ସ୍କେଲ: var (- kf-pulse-scale-to, 1); ସ୍ୱଚ୍ଛତା:var (- kf-pulse-opacity-to, 1); } } }
ଏହା ସୁନିଶ୍ଚିତ କରେ ଯେ ଉପଭୋକ୍ତାମାନେ ହ୍ରାସ କରିବାକୁ ପସନ୍ଦ-ହ୍ରାସ-ଗତି ସେଟ୍ କରିଛନ୍ତି ଆନିମେସନ୍ ଦେଖିବେ ନାହିଁ ଏବଂ ସେମାନଙ୍କ ପସନ୍ଦ ସହିତ ମେଳ ଖାଉଥିବା ଏକ ଅଭିଜ୍ଞତା ପାଇବେ | ତତକ୍ଷଣାତ୍ ଇନ୍ ସେଠାରେ କିଛି କିଫ୍ରେମ୍ ଅଛି ଯାହାକୁ ଆମେ କେବଳ ଅପସାରଣ କରିପାରିବୁ ନାହିଁ, ଯେପରିକି ପ୍ରବେଶ ଆନିମେସନ୍ | ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ ହେବା ଆବଶ୍ୟକ, ଆନିମେଟ କରିବା ଜରୁରୀ; ଅନ୍ୟଥା, ଉପାଦାନର ସଠିକ୍ ମୂଲ୍ୟ ରହିବ ନାହିଁ | କିନ୍ତୁ ହ୍ରାସ ହୋଇଥିବା ଗତିରେ, ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟରୁ ଏହି ପରିବର୍ତ୍ତନ ତୁରନ୍ତ ହେବା ଉଚିତ | ଏହା ହାସଲ କରିବା ପାଇଁ, ଆମେ କୀଫ୍ରେମର ଏକ ଅତିରିକ୍ତ ସେଟ୍ ବ୍ୟାଖ୍ୟା କରିବୁ ଯେଉଁଠାରେ ମୂଲ୍ୟ ତୁରନ୍ତ ଶେଷ ସ୍ଥିତିକୁ ଯାଏ | ଏଗୁଡ଼ିକ ଆମର ଡିଫଲ୍ଟ କୀଫ୍ରେମ୍ ହୋଇଯାଏ | ତା’ପରେ, ଆମେ ପୂର୍ବ ଉଦାହରଣ ପରି ପସନ୍ଦ-ହ୍ରାସ-ଗତି ସେଟ୍ ପାଇଁ ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ଭିତରେ ନିୟମିତ କୀଫ୍ରେମ୍ ଯୋଗ କରିବୁ | / * ହ୍ରାସ ହୋଇଥିବା ଗତି ପାଇଁ ତୁରନ୍ତ ପପ୍ କରନ୍ତୁ * / @keyframes kf-zoom { ରୁ, ରୁ { ସ୍କେଲ: var (- kf-zoom-to, 1); } }
@ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { / * ମୂଳ ଜୁମ୍ କିଫ୍ରେମ୍ * / @keyframes kf-zoom { ରୁ { ସ୍କେଲ: var (- kf-zoom-from, 0.8); } to { ସ୍କେଲ: var (- kf-zoom-to, 1); } } }
ଏହି ଉପାୟରେ, ଉପଭୋକ୍ତାମାନେ ଯେଉଁମାନେ ହ୍ରାସ ହୋଇଥିବା ଗତିକୁ ପସନ୍ଦ କରନ୍ତି, ତତକ୍ଷଣାତ୍ ଏହାର ଅନ୍ତିମ ଅବସ୍ଥାରେ ଦେଖାଯିବ, ଯେତେବେଳେ ଅନ୍ୟ ସମସ୍ତେ ଆନିମେଟେଡ୍ ଟ୍ରାନ୍ସମିସନ୍ ପାଇବେ | ନରମ ଉପାୟ | ଏପରି କିଛି ଘଟଣା ଅଛି ଯେଉଁଠାରେ ଆମେ କିଛି ଗତି ରଖିବାକୁ ଚାହୁଁ, କିନ୍ତୁ ମୂଳ ଆନିମେସନ୍ ଅପେକ୍ଷା ବହୁତ ନରମ ଏବଂ ଶାନ୍ତ | ଉଦାହରଣ ସ୍ .ରୂପ, ଆମେ ଏକ ବାଉନ୍ସ ପ୍ରବେଶ ଦ୍ୱାରକୁ ଏକ ନମ୍ର ଫ୍ୟାଡ୍-ଇନ୍ ସହିତ ବଦଳାଇ ପାରିବା |
@keyframes kf-bounce { / * ହ୍ରାସ ହୋଇଥିବା ଗତି ପାଇଁ ସଫ୍ଟ ଫ୍ୟାଡ୍-ଇନ୍ * / }
@ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { @keyframes kf-bounce { / * ମୂଳ ବାଉନ୍ସ କୀ ଫ୍ରେମ୍ * / } }
ବର୍ତ୍ତମାନ, ହ୍ରାସ ହୋଇଥିବା ଗତି ସହିତ ଉପଭୋକ୍ତାମାନେ ତଥାପି ଦୃଶ୍ୟର ଅନୁଭବ ପାଆନ୍ତି, କିନ୍ତୁ ବାଉନ୍ସ କିମ୍ବା ଇଲାଷ୍ଟିକ୍ ଆନିମେସନ୍ ର ତୀବ୍ର ଗତିବିଧି ବିନା | ବିଲଡିଂ ବ୍ଲକଗୁଡିକ ସହିତ, ପରବର୍ତ୍ତୀ ପ୍ରଶ୍ନ ହେଉଛି ସେମାନଙ୍କୁ ପ୍ରକୃତ କାର୍ଯ୍ୟ ପ୍ରବାହର ଏକ ଅଂଶ କିପରି କରିବେ | ନମନୀୟ କିଫ୍ରେମ୍ ଲେଖିବା ଗୋଟିଏ କଥା, କିନ୍ତୁ ଏକ ବୃହତ ପ୍ରୋଜେକ୍ଟରେ ସେମାନଙ୍କୁ ନିର୍ଭରଯୋଗ୍ୟ କରିବା ପାଇଁ କିଛି କ strateg ଶଳ ଆବଶ୍ୟକ କରେ ଯାହା ମୋତେ କଠିନ ଉପାୟ ଶିଖିବାକୁ ପଡିଲା | କାର୍ଯ୍ୟାନ୍ୱୟନ କ ateg ଶଳ ଏବଂ ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସ | ଥରେ ଆମର କିଫ୍ରାମ୍ ଟୋକେନ୍ଗୁଡ଼ିକର ଏକ ଦୃ solid ଲାଇବ୍ରେରୀ ଥଲେ, ପ୍ରକୃତ ଚ୍ୟାଲେଞ୍ଜ ହେଉଛି ସେମାନଙ୍କୁ କିପରି ଦ day ନନ୍ଦିନ କାର୍ଯ୍ୟରେ ଆଣିବା |
ପ୍ରଲୋଭନ ହେଉଛି ସମସ୍ତ କିଫ୍ରେମ୍ ଗୁଡିକୁ ଥରେ ଛାଡି ସମସ୍ୟାର ସମାଧାନ ଘୋଷଣା କର, କିନ୍ତୁ ଅଭ୍ୟାସରେ ମୁଁ ପାଇଲି ଯେ ଧୀରେ ଧୀରେ ପୋଷ୍ୟ ସନ୍ତାନ ଗ୍ରହଣରୁ ସର୍ବୋତ୍ତମ ଫଳାଫଳ ଆସେ | ଅତି ସାଧାରଣ ଆନିମେସନ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ, ଯେପରି ଫେଡ୍ କିମ୍ବା ସ୍ଲାଇଡ୍ | ଏଗୁଡ଼ିକ ହେଉଛି ସହଜ ବିଜୟ ଯାହା ବଡ଼ ପୁନ r ଲିଖନ ଆବଶ୍ୟକ ନକରି ତୁରନ୍ତ ମୂଲ୍ୟ ଦେଖାଏ | ନାମକରଣ ହେଉଛି ଅନ୍ୟ ଏକ ବିନ୍ଦୁ ଯାହା ଧ୍ୟାନ ପାଇବାକୁ ଯୋଗ୍ୟ | ଏକ ସ୍ଥିର ଉପସର୍ଗ କିମ୍ବା ନାମ ସ୍ଥାନ ଏହା ସ୍ପଷ୍ଟ କରେ ଯେ କେଉଁ ଆନିମେସନ୍ ଟୋକେନ୍ ଏବଂ କେଉଁଟି ସ୍ଥାନୀୟ ଏକ-ଅଫ୍ | ଏହା ମଧ୍ୟ ଦୁର୍ଘଟଣାଜନିତ ଧକ୍କାକୁ ରୋକିଥାଏ ଏବଂ ନୂତନ ଦଳର ସଦସ୍ୟମାନଙ୍କୁ ଏକ ନଜରରେ ଅଂଶୀଦାରିତ ସିଷ୍ଟମକୁ ଚିହ୍ନିବାରେ ସାହାଯ୍ୟ କରେ | କୋଡ୍ ନିଜେ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଯେତିକି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ | ଏପରିକି ପ୍ରତ୍ୟେକ କିଫ୍ରେମ୍ ଟୋକେନ୍ ଉପରେ ଏକ ସଂକ୍ଷିପ୍ତ ମନ୍ତବ୍ୟ ପରେ ଅନୁମାନ କରିବାର ଘଣ୍ଟା ସଞ୍ଚୟ କରିପାରିବ | ଜଣେ ଡେଭଲପର୍ ଟୋକେନ୍ ଫାଇଲ୍ ଖୋଲିବାକୁ, ଆବଶ୍ୟକ କରୁଥିବା ପ୍ରଭାବ ପାଇଁ ସ୍କାନ୍ କରିବାକୁ ଏବଂ ବ୍ୟବହାର ପ୍ୟାଟର୍ କୁ ସିଧା ସେମାନଙ୍କ ଉପାଦାନରେ କପି କରିବାକୁ ସମର୍ଥ ହେବା ଉଚିତ୍ | ନମନୀୟତା ହିଁ ଏହି ଉପାୟକୁ ପ୍ରୟାସର ମୂଲ୍ୟ ଦେଇଥାଏ | ସମ୍ବେଦନଶୀଳ କଷ୍ଟମ୍ ଗୁଣଗୁଡିକୁ ଉନ୍ମୋଚନ କରି, ଆମେ ସିଷ୍ଟମ୍ ଭାଙ୍ଗିବା ବିନା ଆନିମେସନ୍ ଆଡାପ୍ଟ୍ କରିବାକୁ ଦଳଗୁଡିକୁ ରୁମ୍ ଦେଇଥାଉ | ସେହି ସମୟରେ, ଅତ୍ୟଧିକ ଜଟିଳ ନହେବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ | ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ନୋବଗୁଡିକ ପ୍ରଦାନ କରନ୍ତୁ ଏବଂ ଅବଶିଷ୍ଟ ମତାମତ ଦିଅନ୍ତୁ | ଶେଷରେ, ଅଭିଗମ୍ୟତା ମନେରଖ | ପ୍ରତ୍ୟେକ ଆନିମେସନ୍ ହ୍ରାସ ହୋଇଥିବା ଗତି ବିକଳ୍ପ ଆବଶ୍ୟକ କରେ ନାହିଁ, କିନ୍ତୁ ଅନେକ ଆବଶ୍ୟକ କରନ୍ତି | ଏହି ଆଡଜଷ୍ଟମେଣ୍ଟଗୁଡିକରେ ଶୀଘ୍ର ବେକିଂ କରିବା ଅର୍ଥ ଆମକୁ ପରେ ପରେ ପୁନ rofofit କରିବାକୁ ପଡିବ ନାହିଁ, ଏବଂ ଏହା ଏକ ଯତ୍ନର ସ୍ତର ଦେଖାଏ ଯାହା ଆମର ଉପଭୋକ୍ତାମାନେ ଧ୍ୟାନ ଦେବେ ଯଦିଓ ସେମାନେ ଏହା ବିଷୟରେ ଉଲ୍ଲେଖ କରନ୍ତି ନାହିଁ |
ମୋ ଅଭିଜ୍ଞତାରେ, କିଫ୍ରାମ୍ ଟୋକେନ୍ଗୁଡ଼ିକୁ ଆମର ଡିଜାଇନ୍ ଟୋକେନ୍ ୱାର୍କଫ୍ଲୋର ଏକ ଅଂଶ ଭାବରେ ବ୍ୟବହାର କରିବା ହିଁ ସେମାନଙ୍କୁ ଷ୍ଟିକ୍ କରିଥାଏ | ଥରେ ସେଗୁଡ଼ିକ ଥରେ, ସେମାନେ ବିଶେଷ ପ୍ରଭାବ ପରି ଅନୁଭବ କରିବା ବନ୍ଦ କରି ଡିଜାଇନ୍ ଭାଷାର ଏକ ଅଂଶ ହୁଅନ୍ତି, ଉତ୍ପାଦଟି କିପରି ଗତି କରେ ଏବଂ ପ୍ରତିକ୍ରିୟା କରେ ତାହାର ଏକ ପ୍ରାକୃତିକ ବିସ୍ତାର | ରାପିଙ୍ଗ୍ ଅପ୍ | ନିର୍ମାଣ ଇଣ୍ଟରଫେସଗୁଡ଼ିକର ଆନିମେସନ୍ ସବୁଠୁ ଆନନ୍ଦଦାୟକ ଅଂଶ ହୋଇପାରେ, କିନ୍ତୁ ଗଠନ ବିନା, ସେମାନେ ମଧ୍ୟ ନିରାଶାର ସବୁଠାରୁ ବଡ଼ ଉତ୍ସ ହୋଇପାରନ୍ତି | କିଫ୍ରାମ୍ଗୁଡ଼ିକୁ ଟୋକେନ୍ ଭାବରେ ବ୍ୟବହାର କରି, ଆପଣ ଏପରି କିଛି ନିଅନ୍ତି ଯାହା ସାଧାରଣତ mess ଅଶୁଭ ଏବଂ ଏହାକୁ ପରିଚାଳନା କରିବା ଏବଂ ଏହାକୁ ଏକ ସ୍ୱଚ୍ଛ, ପୂର୍ବାନୁମାନଯୋଗ୍ୟ ସିଷ୍ଟମରେ ପରିଣତ କରିବା କଷ୍ଟକର | ପ୍ରକୃତ ମୂଲ୍ୟ କେବଳ କିଛି ଧାଡି କୋଡ୍ ସଞ୍ଚୟ କରିବାରେ ନୁହେଁ | ଏହା ଆତ୍ମବିଶ୍ୱାସରେ ଯେ ଯେତେବେଳେ ଆପଣ ଏକ ଫ୍ୟାଡ୍, ସ୍ଲାଇଡ୍, ଜୁମ୍, କିମ୍ବା ସ୍ପିନ୍ ବ୍ୟବହାର କରନ୍ତି, ସେତେବେଳେ ଆପଣ ଜାଣିଥିବେ ଯେ ଏହା ପ୍ରୋଜେକ୍ଟରେ କିପରି ଆଚରଣ କରିବ | ଏହା ନମନୀୟତା ମଧ୍ୟରେ ଅଛି ଯାହା ଅସୀମ ପରିବର୍ତ୍ତନଗୁଡ଼ିକର ବିଶୃଙ୍ଖଳା ବିନା କଷ୍ଟମ୍ ଗୁଣରୁ ଆସିଥାଏ | ଏବଂ ଏହା ଯୋଡିବା ପରିବର୍ତ୍ତେ ଭିତ୍ତିଭୂମିରେ ନିର୍ମିତ ଆକ୍ସେସିବିଲିଟିରେ ଅଛି |ଏକ ଚିନ୍ତାଧାରା ମୁଁ ଦେଖିଛି ଏହି ଚିନ୍ତାଧାରା ବିଭିନ୍ନ ଦଳ ଏବଂ ବିଭିନ୍ନ କୋଡବେସରେ କାମ କରେ, ଏବଂ pattern ାଞ୍ଚା ସର୍ବଦା ସମାନ | ଥରେ ଟୋକେନ୍ ଗୁଡ଼ିକ ଥରେ, କିଫ୍ରାମ୍ ଗୁଡିକ କ icks ଶଳର ଏକ ବିସ୍ତୃତ ସଂଗ୍ରହ ହେବା ବନ୍ଦ କରିଦିଏ ଏବଂ ଡିଜାଇନ୍ ଭାଷାର ଏକ ଅଂଶ ହୋଇଯାଏ | ସେମାନେ ଉତ୍ପାଦକୁ ଅଧିକ ଉଦ୍ଦେଶ୍ୟମୂଳକ, ଅଧିକ ସ୍ଥିର ଏବଂ ଅଧିକ ଜୀବନ୍ତ ଅନୁଭବ କରନ୍ତି | ଯଦି ଆପଣ ଏହି ଆର୍ଟିକିଲରୁ ଗୋଟିଏ ଜିନିଷ ନିଅନ୍ତି, ତେବେ ଏହା ହେଉ: ଆନିମେସନ୍ ସମାନ ଯତ୍ନ ଏବଂ ଗଠନ ପାଇଁ ଯୋଗ୍ୟ, ଯାହା ଆମେ ପୂର୍ବରୁ ରଙ୍ଗ, ଟାଇପୋଗ୍ରାଫି ଏବଂ ବ୍ୟବଧାନକୁ ଦେଇଥାଉ | କିଫ୍ରାମ୍ ଟୋକେନ୍ ଗୁଡିକରେ ଏକ ଛୋଟ ବିନିଯୋଗ ପ୍ରତ୍ୟେକ ଥର ଆପଣଙ୍କ ଇଣ୍ଟରଫେସ୍ ଗତି କଲାବେଳେ ଦେୟ ଦେଇଥାଏ |
